使用Image和canvas实现下载证书功能
项目中需要实现点击按钮下载证书这个功能,大佬说用canvas实现。记录一下如何实现。
创建图片img标签
const img = new Image() //创建图片img标签
图片的属性
- url:图片的地址
- crossOrigin
- 图片获取过程中是否开启CORS功能
- 两个值 anonymous 和 use-credentials
- anonymous:会在请求中的header中的带上Origin属性,但请求不会带上cookie和其他的一些认证信息;
- use-credentials:会在请求中的header中的带上Origin属性并且带上cookie和其他的一些认证信息;
- 在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。
img.src = this.url;
img.crossOrigin = 'anonymous';
图片onload属性
- onload 事件在图片加载完成后立即执行。
img.onload = function () {
const canvas = document.createElement('canvas'); //创建canvas
}
以上,实现图片下载功能。
利用canvas给证书补充具体信息
- width :宽度
- height :高度
- drawImage 将图片渲染到canvas里;
- drawImage(image, x, y):image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标;
- textAlign :文本对齐选项
- textBaseline:文字垂直方向的对齐方式
- font:字体样式
- fillStyle:描述颜色和样式的属性
- fillText:在 (x, y)位置填充文本的方法
- 语法:ctx.fillText(text, x, y, [maxWidth])
- x:文本起点的 x 轴坐标;
- y:文本起点的 y 轴坐标:
- text:使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。
img.onload = function () {
const canvas = document.createElement('canvas'); //创建canvas
console.log(img);
const ctx = canvas.getContext('2d');
const w_img = img.width;
const h_img = img.height;
console.log(h_img);
let nu = 1;
if (w_img > 1000) {
nu = w_img / 1000;
}
canvas.width = w_img / nu; // 设置宽度
canvas.height = h_img / nu; // 设置高度
ctx.drawImage(img, 0, 0, w_img / nu, h_img / nu);
// ctx.save();
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.font = font;
ctx.fillStyle = fillStyle;
ctx.fillText(name, 175, h_img / nu - 360); // 名字位置
ctx.fillText(dj, w_img / nu - 330, h_img / nu - 320); //等级位置
ctx.fillText(bh, 300, h_img / nu - 105); //编号位置
ctx.fillText(date, w_img / nu - 350, h_img / nu - 180); //日期位置
const base64Url = canvas.toDataURL();
// 使用a标签下载图片
const $a = $("<a></a>").attr("href", base64Url).attr("download", '证书');
$a[0].click();
}
以上,就可以实现下载证书功能。