canvas加水印后再base64图片转化file，uploader组件图片转化上传文件处理

本文链接：https://blog.youkuaiyun.com/qq_18390335/article/details/129149968

这段代码展示了如何在JavaScript中利用HTML5的canvas元素对图片进行处理，包括加载图片、添加水印、设置文字属性、保存为base64编码，并进一步转换为file对象用于上传。主要功能是图片加时间戳和地址水印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		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')