var chooseTime = dataTime()
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = readers.result;
img.setAttribute("crossOrigin", 'Anonymous');
img.onload = function () {
//绘制和图片大小相同的canvas
canvas.width = img.width;
canvas.height = img.height;
//canvas绘制图片,0 0 为左上角坐标原点
ctx.drawImage(img, 0, 0);
//绘制水印
// if (objmsg.rotate != undefined && objmsg.rotate != null) {//旋转角度[默认20]
// ctx.rotate((Math.PI / 120) * -objmsg.rotate);
// } else {
// ctx.rotate((Math.PI / 120) * -20);
// }
var fontsize = 18;
// if (objmsg.fontsize != undefined && objmsg.fontsize != null) {//字体大小[默认20px]
// fontsize = objmsg.fontsize;
// }
// ctx.font = fontsize + "px Microsoft Yahei";
// var fontcolor = '255, 255, 255, 0.2';
// if (objmsg.fontcolor != undefined && objmsg.fontcolor != null) {//字体颜色透明度[默认白色]
// fontcolor = objmsg.fontcolor;
// }
// ctx.fillStyle = "rgba(" + fontcolor + ")";
// ctx.textAlign = "center";
// ctx.textBaseline = "middle";
// var density = 3;
// if (objmsg.density != undefined && objmsg.density != null) {//稠密度[默认3]
// density = objmsg.density
// }
console.log('photos图片添加111',chooseTime)
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, img.height-60, img.width,60);//绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)img.height*0.2
ctx.fillStyle = 'rgba(255,255,255)';
ctx.fillText(chooseTime, 10,img.height-45);
// ctx.fillText(localStorage.getItem('clickList_Addr'), 10,img.height-18);
let str = localStorage.getItem('clickList_Addr')
var len = 0;
for (var i = 0; i < str.length; i++){
var a = str.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 2;
} else{
len += 1;
}
}
console.log('我是canvas图片',len)
if (len>30){
ctx.fillText(str.substring(0,20),10,img.height-29)
ctx.fillText(str.substring(20),10,img.height-15)
}
if (len<=30){
ctx.fillText(str,10,img.height-25)
}
var base64 = canvas.toDataURL("image/png");//添加过水印的base64图片
// var imgPathFrom = base64.substring( base64.indexOf( "," ) + 1 );
// base64From = base64 // console.log('我是canvas图片',base64)
document.getElementById('ImgFromcanvas').src = base64;
// if (objmsg.domid != undefined && objmsg.domid != null) {//id图片
// //$(objmsg.domid).attr('src', base64);
// }
// if (objmsg.cb != undefined && objmsg.cb != null) {//回调函数
// objmsg.cb(base64);//回调函数
// }
// imgurl = base64From
let file = base64toFile(base64,'filename') //这个file就是base64转成的file文件
console.log('编辑文件触发z转移文件',file)
uploader.addFile(file, 'dasdff')
canvas加水印后再base64图片转化file,uploader组件图片转化上传文件处理
![](https://img-home.csdnimg.cn/images/20240711042549.png)