需求：根据不同用户自动生成对应证书，并且可以下载该证书（下载后得到的是一张图片），故要想实现该功能，则需要借助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.效果图展示
注：下图证书编号这个地方的样式忘了修改，部分信息由于涉及项目隐私，故马赛克，但不影响整体效果（其中黑色文字+二维码+证书编号是动态的，其余文字都是背景图自带的）
