JS图片水印(水印图片)

attendanceClick(userID,headImg,userName,company,scoreNmu){letbase64Image=’assets/imagesaring.png’;letbase64Image1=’assets/imagesaring1.png’;letbase64Image2=’assets/imagesar…

大家好,又见面了,我是你们的朋友全栈君。

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);
}
}
}

转载于:https://www.cnblogs.com/ChineseLiao/p/7652086.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/128823.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 同时安装wps和office怎样默认office打开_wps表格合并多个文件

    同时安装wps和office怎样默认office打开_wps表格合并多个文件MicrosoftOffice是微软公司的一款办公软件,学习工作中的必备工具。WPS则是由金山推出的新兴免费国产办公软件,也非常的好用,可以手机、平板、电脑三端同步。WPS的功能相对可能会较多,用户群体学生党偏多。但是MicrosoftOffice毕竟是老牌办公软件,商务人士一般使用较多,很多场合下若是有软件要求,基本都会选择需要使用MicrosoftOffice。而且WPS和Office之间相互转换的话,也会有可能出现问题。那么,很多人的电脑上都会同时安装这两款软件。如果我们电脑同时安装了WPS

    2022年10月14日
    0
  • 深度学习环境配置1——windows下的tensorflow-gpu=1.13.2环境配置

    深度学习环境配置1——windows下的tensorflow-gpu=1.13.2环境配置神经网络学习小记录42——windows下的tensorflow-gpu=1.13.2环境配置学习前言环境内容Anaconda安装下载Cudnn和CUDA配置tensorflow环境安装VSCODE学习前言好多人问环境怎么配置,还是出个教程吧。环境内容tensorflow-gpu:1.13.2keras:2.1.5numpy:1.17.4Anaconda安装取网上搜索Anacon…

    2022年5月2日
    40
  • linux命令查看所有进程_获取当前进程句柄

    linux命令查看所有进程_获取当前进程句柄查看系统默认的最大文件句柄数,系统默认是1024#ulimit-n1024查看当前进程打开了多少句柄数#lsof-n|awk‘{print$2}’|sort|uniq-c|sort-nr|more13124204 5724244  5724231  …其中第一列是打开的句柄数,第二列是进程ID。可以根据ID号来查看进程名。#psaef|grep24204…

    2022年10月17日
    0
  • 阿里云cdn要备案吗_未备案域名cdn

    阿里云cdn要备案吗_未备案域名cdncdn需要备案么?需要的,使用国内的cdn节点,必须要有备案才可以做cdn,相关部门为防止cdn滥用,要求必须先备案。国内节点只要是大型数据中心的,基本都要备案。使用CDN产品是需要备案的,但不限制在提供商处备案,只要那么,无备案的网站就无法使用CDN了吗?作为这些网站的站长就只能选择免备案的CDN服务商了,而免备案的CDN加速基本节点都是在海外的。1、选择安全可靠的CDN市面上也有一些提供免费C…

    2022年9月10日
    0
  • 单片机的现状及其发展前景_单片机就业方向

    单片机的现状及其发展前景_单片机就业方向我想对了学习单片机的人而言,肯定都想知道单片机目前的发展现状啊,据此来给自己指定学习目标吧,今天我搜集了一些单片机的发展现状,希望对大家有帮助,^^.计算机系统的发展已明显地朝三个方向发展;这三个方向就是:巨型化,单片化,网络化。以解决复杂系统计算和高速数据处理的仍然是巨型机在起作用,故而,巨型机在目前在朝高速及处理能力的方向努力。单片机在出现时,Intel公司就给其单片机取名为嵌入式微控

    2022年10月21日
    0
  • mybatis无效列类型_未明确定义的列

    mybatis无效列类型_未明确定义的列select*from(这里能正确执行)tmp_tbwhereROWNUM=1 数据库中的语句能正确执行,但是自动生成的语句mybatis不认识了这是因为“能正确执行的语句”中有空格数据库认识,mybatis不认识了不要写成         select字段名         ,字段名       

    2022年10月4日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号