小程序提供了转发给好友的接口，但是没提供分享到朋友圈的接口。于是，只有引导用户保存图片分享到朋友圈。 两种方案：用微信 api 手动保存，用 painter。

微信 api

使用原生接口的话，大致是使用 canvas 绘制出海报，然后下载。所以重点是绘制出海报，下载的流程都是一样的。当然在保存图片到相册前，还会需要获取保存图片到相册的权限。总结下来就是canvas绘制，获取保存权限，保存图片这三个步骤。 首先来看绘制海报，需要使用以下接口

• wx.createCanvasContext 创建 canvas context
• ctx.drawImage 绘制图片到 canvas
• ctx.fillText 写文字
• wx.getImageInfo 获取网络图片的 tempFilePath
• ctx.draw canvas 绘制

最终保存下来的海报是这样的

绘制的内容很简单，首先就是背景图；然后是分享者的头像；接下来是 @ xx 邀请你 这样一个文本描述；最后就是底部的小程序码。

首先，创建 canvas 画布

        <canvas canvas-id='canvas' class='canvas' :style="{height: windowHeight + 'px'}"/>
复制代码

使用小程序 createCanvasContext api,需要传入 canvasid

        const ctx = wx.createCanvasContext('canvas')
复制代码

然后将背景图片绘制出来，背景图片是放在本地的图片。

ctx.drawImage('../../../static/assets/img/poster_background.png', 0, 0, this.windowWidth, this.windowHeight)
复制代码

然后写上文字

ctx.setFontSize(12);
ctx.setFillStyle('#FFFFFF');
ctx.setTextAlign('center');
ctx.fillText(`${this.privateUserInfo.nickname} 邀您领取`, this.windowWidth / 2, this.transformScale(520))
复制代码

这里会将原始尺寸和绘制的尺寸等比例转换一下，就不赘述了。再接下来就是绘制小程序码了。由于小程序码是带了分享者的信息，所以必须是临时获取的网络图片资源，具体怎么获取带有分享者信息的小程序码，会专门写一篇文章介绍。

绘制图片

绘制头像与小程序码，这两张图片都是网络资源，所以都要使用 wx. getImageInfo 接口将其下载下来放到微信内存中，然后使用其response.path 绘制。小程序并不支持直接的绘制网络图片，而且也不支持 base64图片的绘制（虽然模拟器上会有效果）。头像的绘制还有有一个裁剪圆形头像的过程。wx.getImageInfo是异步的，所以在回调函数里绘制，当然这不是好的方式。可以使用 promise 来解决，由于现在已经不用这个代码了，就没有去改了。

wx.getImageInfo({src: miniProgramCodeSrc,success: (response) => {const miniProgramCodeSize = this.transformScale(160)ctx.drawImage(response.path, this.transformScale(85), this.transformScale(710), miniProgramCodeSize, miniProgramCodeSize)wx.getImageInfo({src: this.privateUserInfo.avatar,success: (response) => {const avatarSize = this.transformScale(100)//先绘制圆，裁剪成圆形图片ctx.save();ctx.beginPath();//圆的原点x坐标，y坐标，半径，起始弧度，终止弧度ctx.arc(this.transformScale(320), this.transformScale(425), avatarSize / 2, 0, 2 * Math.PI);ctx.setStrokeStyle('#ffffff');ctx.stroke();ctx.clip();ctx.drawImage(response.path, this.transformScale(270), this.transformScale(375), avatarSize, avatarSize)ctx.restore();ctx.draw(false, () => {this.saveToTempFilePath()})}})}})
复制代码

到这一步，绘制基本就结束了。我们所要的海报内容已经可以在 canvas 上呈现了，接下来就是将 canvas 的内容保存为图片了。值得提醒的是，ctx.draw这个接口也是异步的，需要在其回调中执行下载的操作。

获取 tempFilePath

• wx.canvasToTempFilePath 获取整个 canvas 的tempFilePath

保存图片最重要的就是tempFilePath了，使用canvasToTempFilePath 获取 tempFilePath。需要注意的是canvasToTempFilePath接口二参需要传入 this。

      saveToTempFilePath() {wx.canvasToTempFilePath({canvasId: 'canvas',success: (response) => {//获取相册授权}}, this)}
复制代码

获取 tempFilePath 成功后再获取保存权限，当然也可以先获取保存权限，再获取tempFilePath。

获取保存权限

首先查看是否有保存权限，有权限就可以直接保存了。没有权限就先获取权限，再保存。

• wx.getSetting 查看权限列表
• wx.authorize 若没有保存图片权限，进行授权

wx.getSetting({success: (res) => {if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope:'scope.writePhotosAlbum',success: () => {this.saveImageToPhotosAlbumByWX(response.tempFilePath)}})} else {this.saveImageToPhotosAlbumByWX(response.tempFilePath)}}
})
复制代码

保存图片到相册

• wx.saveImageToPhotosAlbum 保存图片到相册

这一步就很简单了，万事俱备，只差保存了。调用 wx.saveImageToPhotosAlbum 即可。

      saveImageToPhotosAlbumByWX(tempFilePath) {wx.saveImageToPhotosAlbum({filePath: tempFilePath,complete: () => {// 其他操作}})}
复制代码

到这里，使用原生 api 保存一张分享朋友圈的海报就好了。

painter

painter 是什么呢？

小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片

painter 是酷家乐开源的小程序图片生成库，类似 echarts，使用配置对象渲染图片到 canvas。渲染完成后回调会返回 tempFilePath,然后调用 wx.saveImageToPhotosAlbum 即可保存。保存的步骤和第一种方案一致，关键是获取到 tempFilePath。

按照其 readme 来操作就好了，由于项目是使用了 mpvue，所以使用了mpvue接入方案。

使用 painter

        <painter v-if="showPainter" class='canvas' @imgOK="onImgOk" :palette="palette"/>
复制代码

为什么要使用 v-if 呢，需要在所有数据都准备好了后再渲染 painter，否则会无限绘制。

data() {return {//painter 配置数据palette: {width: '640rpx',height: '1008rpx',background: '/static/assets/img/poster_background.png',views: [{type: 'image',url: '',css: {top: '380rpx',left: '320rpx',align: 'center',width: '100rpx',height: '100rpx',borderRadius: '50rpx'}}, {type: 'text',text: '',css: {top: '490rpx',left: '320rpx',align: 'center',fontSize: '24rpx',color: '#fff'}},{type: 'image',url: '',css: {top: '690rpx',left: '85rpx',width: '180rpx',height: '180rpx'}}]}}
},computed: {showPainter() {const avatar = this.palette.views[0].urlconst text = this.palette.views[1].textconst qrCodeUrl = this.palette.views[2].urlreturn avatar !== '' && text !== '' && qrCodeUrl!== ''}
}
复制代码

在 painter绘制成功的回调里，将 tempFilePath 保存起来。接下来的权限获取和保存图片到相册流程就和上一个方案一致了。但是，需要提醒的是，tempFilePath 需要放在全局变量中，不能放在data 中。

注意

保存海报难免会涉及到微信头像。需要注意的是，直接传入微信头像可能会出现保存出来的海报没有头像。究其原因，微信返回的头像链接有两种，一是https://wx.qlogo.cn，还有一种http://thirdwx.qlogo.cn。那么问题来了，小程序配置的允许通讯的域名只能是 https。所以当出现 thirdwx.qlogo.cn 的头像时，就会出现保存海报没有头像。

那么为什么会有两种头像链接呢?

最后选择的解决方案是，后端将头像下载临时保存到服务器，返回一个指向自己服务器的链接，这样域名就可以自己控制了。

总结

总结一下，遇到的一些坑

• 小程序canvas不能支持 base64
• drow 有回调
• drawImage 不能直接使用网络图片
• 需要处理获取权限，用户拒绝后的场景

最后

海报就暴露了，是的，就是漫游鲸。欢迎扫个码体验漫游鲸小程序，欢迎了解下漫游鲸。如果还不了解漫游鲸，那么点击就能了解漫游鲸啦