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‘;
?????}
?????// switch(scoreNmu){
?????// ??case scoreNmu>=60&&scoreNmu<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>=95&&scoreNmu<=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;//添加日期
???????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);
???????}
?????}
?}
JS图片水印
原文地址：http://www.cnblogs.com/ChineseLiao/p/7652086.html