小程序如何生成海报分享朋友圈(1)

这里我具体写下围绕上面所提出的问题，描述大概实现的过程①首先创建canvas画布,我把画布定位设成负的,是为了不让它显示在页面上,是因为我尝试把canvas通过判断条件动态的显示和隐藏,在绘制的时候会出现问题,所以采用了这种方法，这里还有一定要设置画布的大小。

②创建好画布之后，先绘制背景图，因为背景图我是放在本地，所以获取 canvas 组件 canvas-id 属性，通过createCanvasContext创建canvas的绘图上下文 CanvasContext 对象。使用drawImage绘制图像到画布，第一个参数是图片的本地地址，后面两个参数是图像相对画布左上角位置的x轴和y轴，最后两个参数是设置图像的宽高。

const ctx = wx.createCanvasContext(‘myCanvas’)

ctx.drawImage(‘/img/study/shareimg.png’, 0, 0, 690, 1085)

③创建好背景图后，在背景图上绘制头像，文字和数字。通过getImageInfo获取头像的信息，这里需要注意下在获取的网络图片要先配置download域名才能生效，具体在小程序后台设置里配置。获取头像地址，首先量取头像在画布中的大小，和x轴Y轴的坐标，这里的result[0]是我用promise封装返回的一个图片地址

et headImg = new Promise(function (resolve) {

wx.getImageInfo({

src: ${app.globalData.baseUrl2}${that.data.currentChildren.headImg},

success: function (res) {

resolve(res.path)

},

fail: function (err) {

console.log(err)

wx.showToast({

title: ‘网络错误请重试’,

icon: ‘loading’

})

}

})

})

let avatarurl_width = 60, //绘制的头像宽度

avatarurl_heigth = 60, //绘制的头像高度

avatarurl_x = 28, //绘制的头像在画布上的位置

avatarurl_y = 36; //绘制的头像在画布上的位置

ctx.save(); // 先保存状态 已便于画完圆再用

ctx.beginPath(); //开始绘制

//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针

ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内

ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

这里举个例子说下如何绘制文字，比如我要绘制如下这个“字”，需要动态获取前面字数的总宽度，这样才能设置“字”的x轴坐标，这里我本来是想通过measureText来测量字体的宽度，但是在iOS端第一次获取的宽度值不对，关于这个问题，我还在微信开发者社区提了bug，所以我想用另一个方法来实现，就是先获取正常情况下一个字的宽度值，然后乘以总字数就获得了总宽度，亲试是可以的。

let allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length + 325;

ctx.font = ‘normal normal 30px sans-serif’;

ctx.setFillStyle(‘#ffffff’)

ctx.fillText(‘字’, allReading, 150);

④绘制公众号二维码，和获取头像是一样的，也是先通过接口返回图片网络地址，然后再通过getImageInfo获取公众号二维码图片信息⑤如何绘制小程序码，具体官网文档也给出生成无限小程序码接口，通过生成的小程序可以打开任意一个小程序页面，并且二维码永久有效，具体调用哪个小程序二维码接口有不同的应用场景，具体可以看下官方文档怎么说的，也就是说前端通过传递参数调取后端接口返回的小程序码，然后绘制在画布上（和上面写的绘制头像和公众号二维码一样的）

ctx.drawImage(‘小程序码的本地地址’, x轴, Y轴, 宽, 高)

⑥最终绘制完把canvas画布转成图片并返回图片地址

wx.canvasToTempFilePath({

canvasId: ‘myCanvas’,

success: function (res) {

canvasToTempFilePath = res.tempFilePath // 返回的图片地址保存到一个全局变量里

that.setData({

showShareImg: true

})

wx.showToast({

title: ‘绘制成功’,

})

},

fail: function () {

wx.showToast({