微信小程序开发导出朋友圈海报教程

2018-10-18 14:51

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

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

微信 api

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

wx.createCanvasContext 创建 canvas context

ctx.drawImage 绘制图片到 canvas

ctx.fillText 写文字

wx.getImageInfo 获取网络图片的 tempFilePath

ctx.draw canvas 绘制

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

/

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

首先,创建 canvas 画布

使用小程序 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


为什么要使用 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].url
    const text = this.palette.views[1].text
    const qrCodeUrl = this.palette.views[2].url
    return avatar !== \'\' && text !== \'\' && qrCodeUrl!== \'\'
  }
}

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

总结

总结一下,遇到的一些坑

小程序canvas不能支持 base64

drow 有回调

drawImage 不能直接使用网络图片

需要处理获取权限,用户拒绝后的场景


相关资讯: 微信小程序   微信小程序开发教程

参与讨论

发表评论