前端技术实现js图片水印

attendanceClick(userID,headImg,userName,company,scoreNmu) {
let base64Image = 'assets/imagesaring.png';
let base64Image1 = 'assets/imagesaring1.png';
let base64Image2 = 'assets/imagesaring2.png';
let base64Image3 = 'assets/imagesaring3.png';
let base64Image4 = 'assets/imagesaring4.png';
let base64Image5 = 'assets/imagesaring5.png';
//加水印
var canvas = document.createElement('canvas');
var cxt = canvas.getContext('2d');
cxt.fillStyle = 'green';
cxt.fillRect(10, 10, 100, 100);
var img = new Image();
if (scoreNmu>=60&&scoreNmu<70) {
　　img.src = base64Image1;
} else if (scoreNmu>=70&&scoreNmu<80){
　　img.src = base64Image2;
} else if (scoreNmu>=80&&scoreNmu<90){
　　img.src = base64Image3;
} else if (scoreNmu>=90&&scoreNmu<95){
　　img.src = base64Image4;
} else {
　　img.src = base64Image5;
}
if ( headImg == null || headImg == '' ) {
　　headImg = 'assets/images/0.png';
}
img.onload = () => {
　　var date: string = new Date().toLocaleDateString();
　　var datetime: string = date;//添加日期
　　canvas.height = img.height;
　　canvas.width = img.width;
　　cxt.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height);
　　cxt.save();
　　cxt.font = 20 + "px Arial";
　　cxt.textBaseline = 'middle';//更改字号后，必须重置对齐方式，否则居中麻烦。设置文本的垂直对齐方式
　　cxt.textAlign = 'center';
　　let ftop = 715;
　　let fleft = 630;
　　cxt.fillStyle="#000";
　　cxt.fillText(datetime,fleft,ftop);//文本元素在画布居中方式
　　try {
　　　　let tempImage = new Image();
　　　　tempImage.onload = () => {
　　　　　　let tempImageX = 180;
　　　　　　let tempImageY = 310;
　　　　　　let tempImageW = 140;
　　　　　　let tempImageH = 140;
　　　　　　cxt.drawImage(tempImage,tempImageX,tempImageY,tempImageW,tempImageH);
　　　　　　// 用户名
 　　　 　　let tempTextData = userName;
　　　　　　cxt.save();
　　　　　　cxt.font = 40 + "px Arial";
　　　　　　cxt.textBaseline = 'middle';
　　　　　　cxt.textAlign = 'left';
　　　　　　let tempNameX = 360;
　　　　　　let tempNameY = 350;
　　　　　　cxt.fillStyle="#000";
　　　　　　cxt.fillText(tempTextData,tempNameX,tempNameY);

　　　　// 公司名字
　　　　　　let tempCompanyData = company;
　　　　　　if (this.globalFunction.isNull(tempCompanyData)) {
　　　　　　　　tempCompanyData = '平安人寿';
　　　　　　}
　　　　　　cxt.save();
　　　　　　cxt.font = 40 + "px Arial";
　　　　　　cxt.textBaseline = 'middle';
　　　　　　cxt.textAlign = 'left';
　　　　　　let tempCompanyX = 360;
　　　　　　let tempCompanyY = 420;
　　　　　　cxt.fillText(tempCompanyData,tempCompanyX,tempCompanyY);
　　　　　　this.canvasImage = canvas.toDataURL("image/jpg");
　　　　　　let tempSrc = this.canvasImage.substring(22);
　　　　　　　　this.interfaceService.doUpdateRankingPath(userID,tempSrc);
　　　　　　}
　　　　　　tempImage.crossOrigin="anonymous";
　　　　　　tempImage.src = headImg;
　　　　} catch (error) {
　　　　　　console.log('出现错误'+error);
　　　　} 
　　}
}