微信小程序之cavans绘制分享朋友圈图片
2018-08-15 本文已影响0人
肆意咯咯咯
由于微信小程序没有分享朋友圈的api接口，只有分享给好友和微信群的api，但是很多小程序为了扩大宣传，需要进行朋友圈分享，所以 ，要解决分享朋友圈的这个问题，就要用到它的绘图api，也就是我们常说的canvas绘图，现将你要分享的内容绘制出来，再将其转化为图片，进行保存，然后用户选择相册图片手动分享就OK了
接下来我们一步一步说
首先在wxml建立canvas画布以及点击事件需要的按钮，按照你自己的需求
<!-- 画布大小按需定制 这里我按照手机的大小 -->
<canvas canvas-id="myCanvas" style="width:{{Width}}px;height:{{Height}}px;"/>
<!-- 生成分享图 这里的操作是把canvas绘制的图预览出来 -->
<button class='share' type='primary' bindtap='share'>生成分享图</button>
<!-- 刚开始是隐藏的 生成分享图之后显示, 用一个布尔变量来控制 -->
<!-- 这里的样式可以自己定义，如大小和位置 -->
<view hidden='{{hidden}}' class='preview'>
<image src='{{imagePath}}' style="width:{{Width*0.8}}px;height:{{Height*0.8}}px;"></image>
<button type='primary' size='mini' bindtap='save'>保存分享图</button>
</view>
好的，接下来在wxss里面大概写一下样式
/* 画布绘制过程不能隐藏 但是又不能被用户看见 所以定位在用户看不到地方 */
canvas{
position: fixed;
top: 0;
left: 9999px;
}
image{
margin: 10% 10%;
}
哈哈哈，下面就是js了，因为canvas的绘制基本上都是在js中实现的
按照上面的栗子当我们点击"生成分享图"按钮，开始绘制canvas并将其转化为图片，当然绘制canvas会消耗一定的时间，所以你也可以在页面加载时就绘图，在需要的时候直接用
这里我们还是在点击分享时绘制
share: function () {
var that = this
//获取系统信息，具体的属性请前往微信小程序官网查看
wx.getSystemInfo({
success: res => {
console.log(res);
that.setData({
Width: res.screenWidth,
Height: res.screenHeight
})
console.log(that.data.Width)
}
})
var qrcode = '../../image/qrcode.jpg'//二维码图片一般为网络图片后台生成
var imgPath = '../../image/touxiang.png'//头像的图片
var bgImgPath = '../../image/mine_invite.png'//首先你需要准备一张背景图
var width = that.data.Width
var height = that.data.Height
const ctx = wx.createCanvasContext('myCanvas')//创建 canvas 绘图上下文
ctx.drawImage(bgImgPath, 0, 0, width, height)//将背景图绘制到画布中
//绘制头像，这里绘制圆形头像算是一个小重点
ctx.save()
ctx.beginPath()
//首先绘制一个圆形的弧线，大小位置根据你的需求而定，也就是说你想让它放在什么位置，就让它放在什么位置
ctx.arc(width / 8, height / 3 + 0.10 * width + 20, 0.10 * width, 0, 2 * Math.PI)
//这块我是用获取到的width和height来确定头像的位置
ctx.setStrokeStyle('#000')
ctx.stroke()
//使用clip() 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
ctx.clip()
ctx.drawImage(imgPath, width / 8 - 0.10 * width, height / 3 + 20, 0.20 * width, 0.20 * width)
ctx.restore()
//用户的名称，位置你随意
ctx.setFontSize(20)//字体大小
ctx.setFillStyle('#6F6F6F')//设置填充色
ctx.fillText('昵称：妖妖灵', width * 0.3, height / 3 + 60)
//下面你需要描述的文字，因为canvas文字不能够换行，所以这里我们按行一行一行写，当然你也可以自己写一个函数将文字截成一段一段的循环放入画布中
//第一行文字
ctx.setFontSize(14)
ctx.setFillStyle('#111111')
ctx.fillText('身前哪管身后事，浪得几日是几日', width * 0.03, height * 0.54)
ctx.fillText('兄长，我想带一人回云深不知处，', width * 0.03, height * 0.58)
ctx.fillText('带回去……藏起来。', width * 0.03, height * 0.62)
ctx.fillText('你特别好，我喜欢你', width * 0.03, height * 0.66)
ctx.drawImage(qrcode, width / 2 + width * 0.2, height / 2 + 15, 0.25 * width, 0.25 * width)
ctx.setFontSize(12)
ctx.fillText('扫码查收你的美味', width / 2 + width * 0.2, height / 2 + height * 0.2)
ctx.setFontSize(16)
ctx.setFillStyle('#00ffff')
ctx.fillText('可爱多邀你暑假共享美味', width * 0.25, height * 0.84)
ctx.fillText('来腾讯视频看好剧', width * 0.30, height * 0.88)
ctx.draw()
//将canvas画布转化为图片
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.Width,
height: that.data.Height,
destWidth: that.data.Width,
destHeight: that.data.Height,
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath);
/* 这里 就可以显示之前写的 预览区域了 把生成的图片url给image的src */
that.setData({
imagePath: res.tempFilePath,
hidden: false
})
},
fail: function (res) {
console.log(res)
}
})
},
重点就是圆形头像，其他的根据需求，了解canvas绘图，然后就自己添加就好了
这里还有一个问题就是微信小程序官方文档中说将canvas转化为图片，只能在draw方法中使用，但好像也不是必须，有点懵。
好，接下来就是点击"保存分享图"，将图片保存，这里就都是微信的api，直接用就好
save:function(){
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success:function(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
/* 该隐藏的隐藏 */
that.setData({
hidden: true
})
}
}
})
}
})
},
嗯哼，大概就这么多了，上效果图看一下
效果图
保存到手机的图片是这个样子
手机效果图
