vue.js3: 图片的反色/灰度(黑白)/褐色并保存(vue@3.2.37)
Vue 图片 保存 3.2 37 灰度 js3 黑白
2023-09-14 09:01:15 时间
一,js代码:
<template> <div style="position:relative;"> <div style="width: 700px;margin: auto;"> <h1>反色/灰度/褐色</h1> <div><input type="file" accept="image/*" @change="open" /> <button @click="reset">重置</button> </div> <div style="display: flex;margin-top: 5px;"><span style="width:40px;">反色</span> <el-slider style="margin-left:10px;width:640px;" v-model="slideInvert" :min="0" :max="100" show-input /></div> <div style="display: flex;margin-top: 5px;"><span style="width:40px;">灰度</span> <el-slider style="margin-left:10px;width:640px;" v-model="slideGray" :min="0" :max="100" show-input /></div> <div style="display: flex;margin-top: 5px;"><span style="width:40px;">褐色</span> <el-slider style="margin-left:10px;width:640px;" v-model="slideSepia" :min="0" :max="100" show-input /></div> <div :style="{marginLeft:imgLeft+'px',width:imgDispWidth+'px',height:imgDispHeight+'px',overflow:'hidden',marginTop:'10px'}"> <div :width="imgWidth" :height="imgHeight" :style="{transform: 'scale('+scale+')',transformOrigin: originLeft+'% 0% 0px'}"> <svg id="mysvg" :width="imgWidth" :height="imgHeight" class="mysvg" :style="{transformOrigin: '50% 50% 0px',filter: 'invert('+valueInvert+') grayscale('+valueGray+') sepia('+valueSepia+')'}"> <defs> </defs> <image id="img" :xlink:href="imgSrc" :width="imgWidth" :height="imgHeight" /> </svg> </div> </div> <div style="margin-top: 10px;"><button @click="save">保存</button></div> </div> </div> </template> <script> import {computed, ref} from "vue"; export default { name: "grayScale", setup() { //反色的滑杆值 const slideInvert = ref(0); //灰度的滑杆值 const slideGray = ref(0); //褐色的滑杆值 const slideSepia = ref(0); //反色的值 let valueInvert = computed( ()=> { return slideInvert.value / 100; } ); //灰度的值 let valueGray = computed( ()=> { return slideGray.value / 100; } ); //褐色的值 let valueSepia = computed( ()=> { return slideSepia.value / 100; } ); //保存修改 const save = () => { var str = document.getElementById("mysvg") let serializer = new XMLSerializer() var source = serializer.serializeToString(str); source = '<?xml version = "1.0" standalone = "no"?>\r\n' + source; var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); var canvas = document.createElement("canvas") canvas.width = imgWidth.value; canvas.height = imgHeight.value; var context = canvas.getContext("2d"); var image = new Image; image.src = url; image.crossOrigin = ''; image.onload = function () { context.drawImage(image, 0, 0,imgWidth.value,imgHeight.value); downJpgByCanvas(canvas); } } //下载图片 const downJpgByCanvas = (canvas) => { var oA = document.createElement("a"); let time = timeFormat(); oA.download = "img_"+time+'.jpg';// 设置下载的文件名,默认是'下载' oA.href = canvas.toDataURL("image/jpeg"); document.body.appendChild(oA); oA.click(); oA.remove(); // 下载之后把创建的元素删除 } //重置 const reset = () => { slideInvert.value = 0; slideGray.value = 0; slideSepia.value = 0; }; //补0 const add0 = (m) => { return m<10?'0'+m:m } //格式化时间 const timeFormat = ()=>{ var time = new Date(); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); let res = y+add0(m)+add0(d)+add0(h)+add0(mm)+add0(s); return res; } //图片的src const imgSrc = ref(""); //图片的原宽高 const imgWidth = ref(0); const imgHeight = ref(0); //图片的显示宽高 const imgDispWidth = ref(0); const imgDispHeight = ref(0); //svg显示时缩放的比例 const scale = ref(0); //图片的left const imgLeft = ref(0); //svg显示位置的left: const originLeft = ref(0); //读取图片的信息 const open = (e) => { let file = e.target.files[0]; let reader = new FileReader(); reader.readAsDataURL(file); //文件加载成功 reader.onload = () =>{ //重置 reset(); //显示图片 imgSrc.value = reader.result; //得到宽高 let img = new Image(); img.src= reader.result; img.onload = () => { //保存原始宽高 imgWidth.value = img.width; imgHeight.value = img.height; if (img.width >= img.height) { imgDispWidth.value = 700; imgDispHeight.value = (700 * img.height) / img.width; scale.value = 700 / img.width; imgLeft.value = 0; } else { imgDispHeight.value = 500; imgDispWidth.value = (500 * img.width) / img.height; scale.value = 500 / img.height; imgLeft.value = (700-imgDispWidth.value) / 2; } if (scale.value > 1) { originLeft.value = 50; } else { originLeft.value = 0; } } } } return { valueInvert, valueGray, valueSepia, slideInvert, slideGray, slideSepia, save, open, imgSrc, imgWidth, imgHeight, imgDispWidth, imgDispHeight, imgLeft, originLeft, scale, reset, } } } </script> <style scoped> .mysvg { background: rgba(255, 255, 255, 0); border-radius: 0px; transform: scale(1, 1); } </style>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,测试效果
三,查看vue框架的版本
liuhongdi@lhdpc:/data/vue/pdf/image2pdf$ npm list vue image2pdf@0.1.0 /data/vue/pdf/image2pdf ├─┬ @vue/cli-plugin-babel@5.0.8 │ └─┬ @vue/babel-preset-app@5.0.8 │ ├─┬ @vue/babel-preset-jsx@1.3.0 │ │ └── vue@3.2.37 deduped invalid: "2.x" from node_modules/@vue/babel-preset-jsx │ └── vue@3.2.37 deduped └─┬ vue@3.2.37 └─┬ @vue/server-renderer@3.2.37 └── vue@3.2.37 deduped
相关文章
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- vue(18)路由懒加载「建议收藏」
- html使用vue axios,使用 Vue和axios
- vue md5.js_VUE.js
- vue根据下标获取数组中的值_document.getElementBy
- vue数据双向绑定原理-observer
- 你知道import Vue from 'vue' 吗?
- Vue组件基础(上)
- Vue 图片预加载
- vue的双向绑定原理及实现_vue的数据绑定怎么实现
- VUE调试工具
- vue遍历渲染数组「建议收藏」
- vue子组件怎么调用父组件的方法「建议收藏」
- vue-cli(vue脚手架)入门
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- vue 后台经典模版尝试(1)
- Vue实现图片大图预览,v-viewer组件的使用方法演示
- Vue.js 中异常高效可用的 .sync 修饰符
- linux下快速部署Vue项目(linux部署vue)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- @vue/composition-api 解析