JS图片水印

标签：load   img   更改   use   水印   oss   否则   assets   添加   

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图片水印

标签：load   img   更改   use   水印   oss   否则   assets   添加   

原文地址：http://www.cnblogs.com/ChineseLiao/p/7652086.html