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

项目地址：github.com/yancekang/w… 欢迎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()
          }
        })
      }
    })
复制代码