标签：vue const img 37 value 灰度 var ref
一，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,const,img,37,value,灰度,var,ref 来源： https://www.cnblogs.com/architectforest/p/16673740.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。