小程序开发之分享海报并保存到相册功能

项目地址：https://github.com/yancekang/wechat-plug 欢迎star

演示：

小程序生成海报并不能像客户端一样，采用截取页面上指定部分作为生成海报，而是需要用到canvas按照海报模板生成一张图片。

首先我们看下实现的效果

首先我们需要在页面上插入canvas标签 <canvas canvas-id="my_canvas"></canvas>

通过 css隐藏canvas， 需要将canvas定位到页面不可见部位。设置如下属性将canvas定位页面之外。

 position: fixed;
 left: -200vw;

注意：设置canvas尺寸是尽量使用px，是为了尺寸大小和生成海报是尺寸一致不能使用 display: none隐藏canvas

开始绘制

创建 canvas的绘图对象 wx.createCanvasContext

 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白色背景的白板。

首先绘制一个高度为800px蓝色背景

//绘制蓝色背景
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);
}

至此，完成蓝色区域及内容绘制

接下来绘制用户昵称及头像、二维码，接下来比较简单，一层一层绘制就行了。

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

所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）

绘制头像

// 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()
 }
 }
 })
})

将canvas生成图片并保存

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