vant 上传图片加水印

afterReadVideo(file, fileList) {
console.log(file)
let _this = this;
let fileUp = file.file;
file.status = 'uploading';
file.message = '上传中...';
var shuiyin = document.getElementById('shuiyin');
let fileReader = new FileReader();
fileReader.readAsDataURL(fileUp);
let img = new Image()
fileReader.onload = function () {
img.src = fileReader.result;
img.onload = function() {
let canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let dataURL = ''
canvas.height = this.height
canvas.width = this.width
ctx.drawImage(this, 0, 0)
ctx.globalAlpha = 0.3;
ctx.rotate(-Math.PI / 15);
for(let n = 0; n <= canvas.width / 192; n++) {
ctx.drawImage(shuiyin, n * 200, 0, 192, 51)
}
// dataURL = canvas.toDataURL(canvas);
let imgData = canvas.toDataURL(file.type)
let content = _this.dataURLtoFile(imgData, file.name);
//创建一个新的FormData
let formData = new FormData();
// upload这个名字是后台给的
formData.append("arcFile", content);
_this.$axios({
method: "post",
headers: {
"Content-Type": "multipart/form-data"
},
url: '/raptorBrokerServer/service/cont/test/salesContract/uploads.do',
data: formData
})
.then(response => {
if (response.data.success) {
file.status = 'success';
file.message = '上传成功！';
}else {
file.status = 'failed';
file.message = '上传失败，请重新上传';
}
}).catch(error => {
file.status = 'failed';
file.message = '上传失败，请重新上传';
_this.$toast.fail(error);
})
}
}
},

//base64码转化为文件
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, {type:mime})
}