小程序导出朋友圈海报详细记录

时间：2021-12-06 来源：互联网编辑：宝哥软件园浏览：次

小程序提供了转发给朋友的界面，但没有提供与朋友分享的界面。所以，只引导用户保存图片，与朋友分享。两种方案：用微信api手动保存，使用画师。

微信 api

如果使用原生界面，可以用画布绘制海报，然后下载。所以重点是画海报，下载过程也是一样的。当然，在将图片保存到相册之前，您需要获得将图片保存到相册的权限。总结起来就是画布绘制、获取保存权限、保存图片三个步骤。首先，要绘制海报，需要使用以下界面

Wx.createCanvasContext创建画布contextctx.drawImage将图片绘制到canvasctx.fillText编写单词wx.getImageInfo获取网络图片的tempFilePathctx .绘制画布绘制最终保存的海报如下。

小程序导出朋友圈海报详细记录(图1)

绘图的内容很简单，首先是背景图；然后是分享者的化身；接下来是@ xx邀请你的文字描述；最后，是底部的小代码。

首先，创建 canvas 画布

Canvas Canvas-ID=' Canvas ' class=' Canvas ' 3360 style=' { height : window height ' px ' } '/复制代码使用了applet 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 . setTexalign(' center ')；CTX . fill text(` $ { this . private userinfo . nickname }邀请您接收`，this.windowwidth/2, this . transformscale(520))复制代码。在这里，原始尺寸和绘制的尺寸将按相等的比例转换，所以我在这里不再重复。下一步是画小程序代码。因为小程序代码带有分享者的信息，所以一定是临时的网络图片资源。如何用分享者的信息获取小程序代码将在一篇特别的文章中介绍。

绘制图片

绘制头像和小程序代码。这两张图都是网络资源，要用wx下载放入微信内存。getImageInfo接口，然后用它的response.path绘制小程序不支持直接绘制网络图片，也不支持绘制base64图片(虽然模拟器会有效)。画头像的时候还有一个把圆形头像剪下来的过程。Wx.getImageInfo是异步的，所以在回调函数中绘制，这不是一个好方法。你可以用诺言来解决这个问题。由于不再使用该代码，因此没有对其进行更改。

wx . getimageinfo({ src : miniProgramCodeSrc，Success :(response)={ const miniProgramCodeSize=this . transformscale(160)CTX . draw image(response . path，this.transformScale(85)，this.transformScale(710)，miniProgramCodeSize，miniProgramCodeSize)wx . getimageinfo({ src 3360 this . privatewerinfo . avatar，Success :(response)={ const avatar size=this。变换比例(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].url    const text = this.palette.views[1].text    const qrCodeUrl = this.palette.views[2].url    return avatar !== '' && text !== '' && qrCodeUrl!== ''  }}复制代码

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