小程序提供了转发给好友的接口,但是没提供分享到朋友圈的接口。于是,只有引导用户保存图片分享到朋友圈。 两种方案:用微信 api 手动保存,用 painter 。 微信 api使用原生接口的话,大致是使用 canvas 绘制出海报,然后下载。所以重点是绘制出海报,下载的流程都是一样的。当然在保存图片到相册前,还会需要获取保存图片到相册的权限。总结下来就是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 来解决,由于现在已经不用这个代码了,就没有去改了。
到这一步,绘制基本就结束了。我们所要的海报内容已经可以在 canvas 上呈现了,接下来就是将 canvas 的内容保存为图片了。值得提醒的是,ctx.draw这个接口也是异步的,需要在其回调中执行下载的操作。 获取 tempFilePath
保存图片最重要的就是tempFilePath了,使用canvasToTempFilePath 获取 tempFilePath。需要注意的是canvasToTempFilePath接口二参需要传入 this。
获取 tempFilePath 成功后再获取保存权限,当然也可以先获取保存权限,再获取tempFilePath。 获取保存权限首先查看是否有保存权限,有权限就可以直接保存了。没有权限就先获取权限,再保存。
保存图片到相册
这一步就很简单了,万事俱备,只差保存了。调用 wx.saveImageToPhotosAlbum 即可。
到这里,使用原生 api 保存一张分享朋友圈的海报就好了。 painterpainter 是什么呢? 小程序生成图片库,轻松通过 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,否则会无限绘制。
在 painter绘制成功的回调里,将 tempFilePath 保存起来。接下来的权限获取和保存图片到相册流程就和上一个方案一致了。但是,需要提醒的是,tempFilePath 需要放在全局变量中,不能放在data 中。 总结总结一下,遇到的一些坑
最后 |
小程序导出朋友圈海报详细记录
发布:2018-09-19 08:51浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08