这篇文章主要为大家详细介绍了Vue+vant实现图片上传添加水印功能,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
图片上传大家都不会陌生，就算是一个新人也会干的事儿。但说到加水印，当初我一直以为只能是在后端实现。
原来，在前端也是能实现图片上传加水印的。（注：以下的代码都来自于网络，只是我把两部份代码合在一起来实现我的需求而已，在最后面，我也会附上原作者的接，大家都不容易）
【注：我自己写的注释后面会有个"(小冰)"，其他的为原作者的注释】
data(){
fileList:[], //vant中图片上传的双向邦定（小冰）
wmConfig : { //用于水印的东西，下面会用到 （小冰）
font: "microsoft yahei", //字体
textArray: ['张三','2021/11/26 16:44'],//水印文本内容，允许数组最大长度3 即：3行水印
density: 3 //密度 建议取值范围1-5 值越大，水印越多，可能会导致水印重叠等问题，慎重！！！
}
}
data(){
fileList:[], //vant中图片上传的双向邦定（小冰）
wmConfig : { //用于水印的东西，下面会用到 （小冰）
font: "microsoft yahei", //字体
textArray: ['张三','2021/11/26 16:44'],//水印文本内容，允许数组最大长度3 即：3行水印
density: 3 //密度 建议取值范围1-5 值越大，水印越多，可能会导致水印重叠等问题，慎重！！！
}
methods:{
//dataURLtoBlob 、 blobToFile 两个方法的意思是把base64的图片转换成file文件
//1,先将base64转换为blob
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
//2,再将blob转换为file
blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date(); // 文件最后的修改日期
theBlob.name = fileName; // 文件名
return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
},
//这个不多说，都懂，文件上传的方法（小冰）
async afterRead(file){
console.log(file)
let base64 = file.content;
let res = await this.base64AddWaterMaker(base64,this.wmConfig) //加水印的重点就是这个（小冰）
file.content = res;
let blob = this.dataURLtoBlob(file.content);
// 拿到文件名
let fileName = file.file.name;
// 2，在转为 file类型
let file1 = this.blobToFile(blob,fileName);
console.log("file1:",file1);
},
base64AddWaterMaker (base64Img, wmConfig) {
let that = this;
if (wmConfig.textArray.length === 0) {
console.error("****没有水印内容*****");
return base64Img;
}
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
let resultBase64 = null;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
//canvas绘制图片，0 0 为左上角坐标原点
ctx.drawImage(img, 0, 0);
//写入水印
that.drawWaterMark(ctx, img.width, img.height, wmConfig);
resultBase64 = canvas.toDataURL("image/png");
if (!resultBase64) {
reject();
} else {
resolve(resultBase64);
}
};
img.src = base64Img;
});
},
drawWaterMark (ctx, imgWidth, imgHeight, wmConfig) {
let fontSize;
if (imgWidth >= 3456) {
fontSize = 50;
} else if (imgWidth >= 2700) {
fontSize = 30;
} else if (imgWidth >= 2000) {
fontSize = 26;
} else if (imgWidth >= 1436) {
fontSize = 20;
} else if (imgWidth >= 800) {
fontSize = 12;
} else if (imgWidth >= 500) {
fontSize = 10;
} else {
fontSize = 8;
}
console.log(imgWidth, imgHeight, fontSize);
ctx.fillStyle = "white";
ctx.font = `${fontSize}px ${wmConfig.font}`;
ctx.lineWidth = 1;
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
//文字坐标
const maxPx = Math.max(imgWidth, imgHeight);
const stepPx = Math.floor(maxPx / wmConfig.density);
let arrayX = [0];//初始水印位置 canvas坐标 0 0 点
while (arrayX[arrayX.length - 1] < maxPx/2) {
arrayX.push(arrayX[arrayX.length - 1] + stepPx);
}
arrayX.push(...arrayX.slice(1, arrayX.length).map((el) => {
return -el;
}));
console.log(arrayX);
for (let i = 0; i < arrayX.length; i++) {
for (let j = 0; j < arrayX.length; j++) {
ctx.save();
ctx.translate(imgWidth / 2, imgHeight / 2); ///画布旋转原点 移到 图片中心
ctx.rotate(-Math.PI / 5);
if (wmConfig.textArray.length > 3) {
wmConfig.textArray = wmConfig.textArray.slice(0, 3);
}
wmConfig.textArray.forEach((el, index) => {
let offsetY = fontSize * index + 2;
ctx.fillText(el, arrayX[i], arrayX[j] + offsetY);
});
ctx.restore();
}
}
}
}
码就是这些，然而，在此中，我是把图片加水印和图片base64转file两个不同的博文混在一起写的。
图片加水印 ：JavaScript实现为图片添加水印的方法
base64转file：JS中将图片base64转file文件的两种方式
顺便我也把file文件转base64的封装函数也发一下。当然，这个我也是在网上找的。
function fileToBase64(file, callback) { //callback 是一个回调函数，而回调函数往这儿走一回，它结果就是base64
const fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = function () {
callback(this.result)
}
},
function callbaseFun(res){
console.log(res,'res打印出来就是base64')
},
//---------------------------分割线--------------------
第二种方法，跟上面的方法差不多，只是这种方法可以随意去调整水印的位置和大小什么的。
//将base64转化为二进制
dataURItoBlob(base64Data) {
var date = new Date();
//console.log('将base64转化为二进制', date.getMinutes(), date.getSeconds())
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
},
//将base64转化为二进制
dataURItoBlob(base64Data) {
var date = new Date();
//console.log('将base64转化为二进制', date.getMinutes(), date.getSeconds())
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
},
//Base64转Canvas
async imgToCanvas(base64) {
var date = new Date();
//console.log('Base64转Canvas', date.getMinutes(), date.getSeconds())
// 创建img元素
const img = document.createElement('img')
img.setAttribute('src', base64)
await new Promise((resolve) => (img.onload = resolve))
// 创建canvas DOM元素，并设置其宽高和图片一样
const canvas = document.createElement('canvas')
//console.log(img.height)
//console.log(img.width)
canvas.width = img.width
canvas.height = img.height
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getContext('2d').drawImage(img, 0, 0)
return canvas
},
//写入水印
addWatermark(canvas, txt1, txt2, txt3, tex4) {
//alert(canvas.height)
var date = new Date();
//console.log('写入水印', date.getMinutes(), date.getSeconds())
const ctx = canvas.getContext('2d')
//ctx.font = '50px Arial'
//ctx.strokeText(text, 0, 0)
ctx.font = '20px Arial'
ctx.fillStyle = 'white'
ctx.fillText(txt1, 20, canvas.height - 240)
ctx.fillText(txt2, 20, canvas.height - 200)
ctx.fillText(txt3, 20, canvas.height - 160)
ctx.fillText(tex4, 20, canvas.height - 120)
ctx.fillText(tex4, 20, canvas.height - 80)
return canvas
},
//Canvas转图片文件（Image）
convasToImg(canvas) {
var date = new Date();
//console.log('Canvas转图片文件（Image）', date.getMinutes(), date.getSeconds())
// 新建Image对象，可以理解为DOM
let image = new Image()
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式 PNG
image.src = canvas.toDataURL('image/png')
return image
},
//图片文件(Image)转文件(File)
base64ToFile(urlData, fileName) {
var date = new Date();
//console.log('图片文件(Image)转文件(File)', date.getMinutes(), date.getSeconds())
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]); // 解码base64
let n = bytes.length
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, { type: mime });
},
//file对象转base64
fileToBase64(file, callback) { //callback 是一个回调函数，而回调函数往这儿走一回，它结果就是base64
var date = new Date();
//console.log('file对象转base64', date.getMinutes(), date.getSeconds())
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = function () {
let res = callback(this.result)
resolve(res)
}
})
},
callbaseFun(res) {
//console.log('上传的方法')
return new Promise((resolve, reject) => {
let that = this;
//console.log(res, 'base64')
let str = res.split(',');
str[0] = 'data:image/jpeg;base64';
let r = str.toString();
let url = "/ServerAPI/ServerBase64API.ashx"
var obj = {
imgbase64: r,
method: "ServerBase64png",
Module: "DaKa",
id: "a4e89358-9465-4295-87ea-4d0af2bd9133"
}
jQuery.ajax({
url: url,
type: 'POST',
data: obj,
dataType: 'json',
timeout: 8000,
})
.done(res => {
var date = new Date();
//console.log('上传成功', date.getMinutes(), date.getSeconds())
//console.log('成功时执行')
resolve(res)
})
.fail(err => {
//console.log(err, '上传失败')
reject({ msg: '上传失败' })
})
})
},
async oneUpload(e){
let base64 = e.content;
let tempCanvas = await this.imgToCanvas(base64) //得到canvas的值
const canvas = this.addWatermark(tempCanvas , '水印1' , '水印2' , '水印3'); //这儿水印的参数是根据 addWatermark()方法里面的 ctx.fillText(txt1, 20, canvas.height - 240) 进行修改
const img = this.convasToImg(canvas); //Canvas转图片文件（Image）
let newFile = this.base64ToFile(img.src) //图片文件转file对象
let res = await this.fileToBase64(newFile, this.callbaseFun) //file转base64， 注意 第二个参数是一个回调函数，也就是说回调函数里面的参数就是base64的值
}
到此这篇关于Vue+vant实现图片上传添加水印的文章就介绍到这了