网站建设问答小编今天给大家整合了一篇有关《小程序导出朋友圈海报详细记录》的文章，关于小程序导出朋友圈海报详细记录的详细内容欢迎往下阅读，下面就由小编一一给大家介绍，一起去了解吧！

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

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

　　wx.createCanvasContext 创建 canvas context

　　ctx.drawImage 绘制图片到 canvas

　　ctx.fillText 写文字

　　wx.getImageInfo 获取网络图片的 tempFilePath

　　ctx.draw canvas 绘制

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

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

　　使用小程序 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 来解决，由于现在已经不用这个代码了，就没有去改了。

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

　　wx.canvasToTempFilePath 获取整个 canvas 的tempFilePath

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

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

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

　　wx.getSetting 查看权限列表

　　wx.authorize 若没有保存图片权限，进行授权

　　wx.saveImageToPhotosAlbum 保存图片到相册

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

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

　　painter 是什么呢？

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

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

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

　　复制代码

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

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

　　总结一下，遇到的一些坑

　　小程序canvas不能支持 base64

　　drow 有回调

　　drawImage 不能直接使用网络图片

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

  目前，《小程序导出朋友圈海报详细记录》页面仍在完善中，后续将为您提供丰富、全面的关于《小程序导出朋友圈海报详细记录》的最佳回答，小编将持续从百度问答、百度百科、搜狗问答、搜狗百科、微博问答、头条百科、悟空问答、知乎热门问答以及部分合作站点渠道收集和补充完善信息。

  深圳蚂蚁网络网站建设公司提供，系统定制，微信开发、小程序定制、微商城开发、网站建设、网站排名优化推广等互联网项目定制开发服务。版权声明：如发现内容存在版权问题，烦请提供相关信息发邮件至3310459304@qq.com，我们将及时沟通与处理。本站内容均来源于网络，涉及言论、版权与本站无关。