内容简介:小程序提供了转发给好友的接口,但是没提供分享到朋友圈的接口。于是,只有引导用户保存图片分享到朋友圈。 两种方案:用微信 api 手动保存,用使用原生接口的话,大致是使用 canvas 绘制出海报,然后下载。所以重点是绘制出海报,下载的流程都是一样的。当然在保存图片到相册前,还会需要获取保存图片到相册的权限。总结下来就是canvas绘制,获取保存权限,保存图片这三个步骤。 首先来看绘制海报,需要使用以下接口最终保存下来的海报是这样的
小程序提供了转发给好友的接口,但是没提供分享到朋友圈的接口。于是,只有引导用户保存图片分享到朋友圈。 两种方案:用微信 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这个接口也是异步的,需要在其回调中执行下载的操作。
获取 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 中。
总结
总结一下,遇到的一些坑
- 小程序canvas不能支持 base64
- drow 有回调
- drawImage 不能直接使用网络图片
- 需要处理获取权限,用户拒绝后的场景
最后
海报就暴露了,是的,就是漫游鲸。欢迎扫个码体验漫游鲸小程序,欢迎了解下漫游鲸。如果还不了解漫游鲸, 那么点击就能了解漫游鲸啦
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML5+CSS3精致范例辞典
杨东昱 / 清华大学出版社 / 2013-1 / 48.00元
《HTML5+CSS3精致范例辞典(全彩印刷)》是专为希望成为网页设计师的学习者打造的工具书,书中详细说明了设计网页所需的HTML标记语言,对HTML5的网页标签规范作了完整说明,如元素标签的功能、属性以及如何使用等。有了基本网页制作能力,如何让网页更出色,版面更富变化、更易维护管理,那就得靠CSS帮忙了。《HTML5+CSS3精致范例辞典(全彩印刷)》还详细解说了最新CSS3的样式元素,除了说明......一起来看看 《HTML5+CSS3精致范例辞典》 这本书的介绍吧!