分享海报并保存到相册的小程序开发

项目地址：迎星

演示：

小程序无法像客户端那样通过截取页面的指定部分来生成海报。相反，它需要根据海报模板生成图片。

首先我们看一下实现的效果

首先我们需要在页面上插入标签

通过CSS隐藏需要定位到页面的不可见部分。设置以下属性会将其定位在页面之外。

position: fixed; left: -200vw;

注意：设置尺寸时尽量使用px，使尺寸与生成的海报尺寸一致。无法使用：无隐藏。

开始画画

创建的绘图对象wx.

let canvasW = 700 //定义画布宽高，具体根据海报模板定义 let canvasH = 1200 const ctx = wx.createCanvasContext('my_canvas') // 获取绘图对象 my_canvas 为页面canvas的id ctx.clearRect(0, 0, canvasW, canvasH) // 清空画布 ctx.setFillStyle('#ffffff') //设置填充色 ctx.fillRect(0, 0, canvasW, canvasH) //填充画布

之后画布就是一块700*1200白色背景的白板。

首先画出蓝色背景的高度

//绘制蓝色背景 ctx.setFillStyle('#0B5FA5') //设置填充色 ctx.fillRect(0, 0, 690, 800)

要绘制当天的单词，您需要计算文本长度并将内容置于蓝色区域的上方和下方居中。

ctx.setFontSize(40); //设置字体大小 ctx.setFillStyle("#fff") //设置字体颜色

根据内容长度换行。当每行超过630时，进入第二行绘图。这里将每一行文本放入一个数组中，然后绘制数组中的数据。

for (var a = 0; a < yiyu.length; a++) { if (ctx.measureText(temp).width < 630 && ctx.measureText(temp + (yiyu[a])).width <= 630) { temp += yiyu[a]; }//ctx.measureText(text).width 测量文本text的宽度 else { row.push(temp); temp = yiyu[a]; }

} row.push(temp); // 寻找绘制内容的Y坐标，也就是蓝色区域高度-内容高度（行数* 行高）/ 2 let top = (800 - row.length * 48) / 2 for (var b = 0; b < row.length; b++) { console.log(((800 - top) / 2) + (b + 1) * 48) ctx.fillText(row[b], 30, top + (b + 1) * 48); }

至此，蓝色区域和内容的绘制就完成了。

接下来，绘制用户的昵称、头像和二维码。接下来的步骤就比较简单了，一层一层的画就可以了。

绘制图片时，值得注意的是，需要先将图片转换为本地图片。

需要绘制的图片资源（在线图片必须先通过/下载）

绘制头像

// 45为圆角，90为头像宽高 ctx.save() ctx.arc(30 + 45, 855 + 45, 45, 0, 2 * Math.PI); ctx.clip() //裁剪圆角 ctx.drawImage(this.data.user_img, 30, 855, 90, 90) ctx.restore() // 还原上次保存

绘制昵称和提示信息

// 绘制昵称 ctx.setFontSize(32); ctx.setFillStyle("#333") ctx.fillText('科技男', 150, 890) ctx.setFontSize(24); ctx.setFillStyle("#999") ctx.fillText('邀请您使用微信小程序', 150, 930)

绘制二维码

// 绘制二维码 ctx.drawImage(this.data.qr_img, 540, 835, 100, 100) ctx.fillText('长按识别二维码', 500, 970)

至此，整个海报就完成了。

保存到相册时需要获取相册权限，可用

wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) {

wx.authorize({ scope: 'scope.writePhotosAlbum', success() { that.saveImages() }, fail() { wx.showToast({ title: '保存失败', icon: "none" }) } }) } else { that.saveImages() } } }) })

图像将被生成并保存

wx.canvasToTempFilePath({ canvasId: 'my_canvas', success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { wx.hideLoading() wx.showToast({ title: '保存成功', icon: 'none' }) }, complete: function () { wx.hideLoading() } }) } })