需求:根据不同用户自动生成对应证书,并且可以下载该证书(下载后得到的是一张图片),故要想实现该功能,则需要借助canvas将动态生成的内容绘制到页面中,然后再实现下载功能。
1.html代码
<view class="certify-main">
<canvas type="2d" id="myCanvas" style="width: 375px; height: 550px;background-color: #fff;" />
<view class="download" @click="download">下载证书</view>
</view>
页面很简单,只包含一个canvas和下载按钮即可。
2.js代码
// 所需数据
data() {
return {
name: "",
year: "",
month: "",
day: "",
beforeName: "",
textCanvas: null,
certificateNo:'',
certQrCode:'', // 后台返回的二维码地址
};
},
// 所需方法
methods(){
// 从后台获取信息(以下代码我做了封装,你们直接正常请求接口获取数据就行,可以忽略)
getCurrentOrg() {
let opts = {
url: url, // url是接口地址
method: "get",
};
let param = {}; // 参数
request
.httpTokenRequest(opts, param)
.then((data) => {
if (data && data.data && data.data.data) {
// 将获取到的数据赋值给对应字段
const msg = data.data.data;
if (msg.updateTime) {
this.year = msg.updateTime.substring(0, 4)
this.month = msg.updateTime.substring(5, 7)
this.day = msg.updateTime.substring(8, 10)
}
this.beforeName = msg.snmsPrefix || "";
this.name = msg.orgName;
this.certificateNo = msg.certCode
this.certQrCode = msg.certQrCode
// 调用canvas绘制内容的方法
this.drawCanvas()
}
})
.catch((err) => {
console.log(err);
this.$refs.uToast.show({
title: "数据异常或不存在",
type: "warning",
duration: "2300",
});
});
},
// 下载证书的方法
download() {
// 指定 this 指向
let that = this;
// 在微信中保存canvas为图片到本地,要通过canvas 实例的参数进行设置
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.textCanvas.width, // 设置画布宽度
height: that.textCanvas.height, // 设置画布高度
destWidth: that.textCanvas.width, // 屏幕width像素密度设置
destHeight: that.textCanvas.height, // 屏幕height像素密度设置
canvas: that.textCanvas, // 这里是重点,获取实例的时候保存为全局变量就行了
complete(res) {
console.log(res);
// res.tempFilePath 返回的是临时地址 png 或者 jpg
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
uni.showToast({
title: "保存成功",
icon: "success",
});
},
fail() {
uni.showToast({
title: "保存失败",
icon: "error",
});
},
});
},
});
},
drawCanvas() {
// 指定this的指向
let that = this;
// uni-app 中,不管是小程序,app,h5 在获取元素实例时,都是统一的方法,只要获取元素的宽高
uni
.createSelectorQuery()
.select("#myCanvas")
.fields({ node: true, size: true })
.exec((res) => {
console.log(res);
// 获取设备设备像素比
const dpr = uni.getSystemInfoSync().pixelRatio;
// 微信小程序绘制
let textCanvas = (that.textCanvas = res[0].node); // 获取元素实例
textCanvas.width = res[0].width * dpr; // 设置canvas像素宽
textCanvas.height = res[0].height * dpr; // 设置canvas像素高
let textCtx = textCanvas.getContext("2d"); // 创建二维绘图
textCtx.clearRect(0, 0, res[0].width, res[0].height); // 设置画布大小
textCtx.beginPath(); // 创建一条新的路劲
textCtx.scale(dpr, dpr); // 设置x,y缩放(这里作用不大,,没效果)
// 这里开始绘制canvas内容,绘制的过程当中,不知道是小程序的问题,还是什么问题在绘制有背景图片的内容时,
// 文字内容必须要延迟绘制,也就是要定时器延迟一定时间才能绘制,要不然就会将文字覆盖在图片下方。
// 图片的绘制(这里将此图片作为背景图的,图片不能带底色,即透明的,方便在上面写字绘图)
const tx = textCanvas.createImage();
tx.src = "https://test.xxxx.com/pic/new_certify.png"; // 线上地址或者本地地址都可以
tx.onload = () => {
textCtx.drawImage(
tx,
5,
20,
res[0].width-10,
res[0].height-20
); // 参数从左到右说明, 图片文件,x轴开始位置,y轴开始位置,x轴结束位置,y轴结束位置
};
// 文字设置
textCtx.fillStyle = "#333"; // 文字颜色
textCtx.font = "bold 12px MicrosoftYaHei"; // 字体样式 设置加粗("normal bold 16px sans-serif");
textCtx.fillText(this.name, 102, 203); // 设置文字内容, x轴位置,y轴位置
textCtx.fillText(this.year, 111, 230); // 设置文字内容, x轴位置,y轴位置
textCtx.fillText(this.month, 180, 230); // 设置文字内容, x轴位置,y轴位置
textCtx.fillText(this.day, 230, 230); // 设置文字内容, x轴位置,y轴位置
textCtx.fillText(this.beforeName, 168, 296); // 设置文字内容, x轴位置,y轴位置
textCtx.fillStyle = "#003E8A";
textCtx.font = "10px MicrosoftYaHei";
textCtx.fillText(this.certificateNo, 186, 466); // 设置文字内容, x轴位置,y轴位置
// 二维码设置
const tx1 = textCanvas.createImage();
tx1.src = this.certQrCode
tx1.onload = () => {
textCtx.drawImage(
tx1,
154,
380,
65,
65
); // 参数从左到右说明, 图片文件,x轴开始位置,y轴开始位置,x轴结束位置,y轴结束位置
};
});
},
}
3.效果图展示
注:下图证书编号这个地方的样式忘了修改,部分信息由于涉及项目隐私,故马赛克,但不影响整体效果(其中黑色文字+二维码+证书编号是动态的,其余文字都是背景图自带的)