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

项目地址：

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