JS Image watermark

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 ';
Add watermark
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 ';
}
Switch (SCORENMU) {
Case SCORENMU&GT;=60&AMP;&AMP;SCORENMU&LT;70:
// {
IMG.SRC = Base64image1;
// }
Break

Case SCORENMU>=70&&SCORENMU<80:
// {
IMG.SRC = Base64image2;
// }
Break

Case SCORENMU>=80&&SCORENMU<90:
// {
IMG.SRC = Base64image3;
// }
Break

Case SCORENMU>=90&&SCORENMU<95:
// {
IMG.SRC = Base64image4;
// }
Break

Case SCORENMU&GT;=95&AMP;&AMP;SCORENMU&LT;=100:
// {
IMG.SRC = Base64image5;
// }
Break
Default
// {
IMG.SRC = Base64image;
// }
Break
// }
IMG.SRC = Base64image;
Img.onload = () + = {
var date:string = new Date (). toLocaleDateString ();
var datetime:string = date;//Added 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 = + "px Arial";
Cxt.textbaseline = ' middle ';//after changing the font size, you must reset the alignment, otherwise the center is troublesome. Set the vertical alignment of text
cxt.textalign = ' center ';
Let ftop = 715;
Let fleft = 630;
Cxt.fillstyle= "#000";
Cxt.filltext (datetime,fleft,ftop);//The text element is centered on the canvas
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);
User name
Let temptextdata = UserName;
Cxt.save ();
Cxt.font = + + "px Arial";
Cxt.textbaseline = ' Middle ';
Cxt.textalign = ' Left ';
Let Tempnamex = 360;
Let Tempnamey = 350;
Cxt.fillstyle= "#000";
Cxt.filltext (Temptextdata,tempnamex,tempnamey);

Company Name
Let Tempcompanydata = Company;
if (This.globalFunction.isNull (Tempcompanydata)) {
Tempcompanydata = ' Ping An life ';
}
Cxt.save ();
Cxt.font = + + "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 occurred ' +error);
}
}
}

JS Image watermark