推荐下载
-
2020-05-12 浏览：739
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：503
-
2020-05-12 浏览：498
小程序导出朋友圈海报详细记录
发布时间:2020-10-08小程序提供了转发给好友的接口，但是没提供分享到朋友圈的接口。于是，只有引导用户保存图片分享到朋友圈。 两种方案：用微信 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这个接口也是异步的，需要在其回调中执行下载的操作。
获取 tempFilePathwx.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 保存图片到相册
- 上一篇：小程序构建骨架屏的探索
- 下一篇：从0到1，如何设计一款体育类小程序
