这一章节呢 就讲下如何生成朋友圈海报。对于这类的需求，最近是贼多。因为小程序本来就是即用即走的，如何能高效快速的拉新，以及留住用户呢？emmmm。拉新嘛当然得往票圈看齐，留存就得看你的产品里是否有吸引人的地方。
如何高效的让其他用户知道你的小程序产品，如何推广你的小程序？首先放几张图：
image.png
众所周知呢，小程序是不能分享到票圈的，所以我们就有了生成海报的概念，那么如何去操作生成海报呢？
使用canvas画图
小程序提供了几个相关的画图api 点这里
第一步操作：
首先我们需要在页面上创建一个canvas，然后因为canvas 是系统组件它的层级最高，所以会导致一直显示在页面上，如果你需要查看效果图，那么可以暂时不理，最后实现的时候我们需要给他一个样式`position: absolute; top: -10000rpx;`。让它定位到页面可视区域之外，不能让用户查看到它。
<canvas canvas-id="mycanvas" />
第二步操作：
js里需要把页面背景图、小程序码图 以及用户头像等图片 使用
wx.getImageInfo({
src: ‘xxx.png‘,
success: (res) => { },
fail: (err)=>{
})
把cdn地址的图片 转成微信本地图片，不然生成不了海报。这个API有较多的转换失败的情况，现在我们小程序后台报错基本都是该问题。所以需要在fail回调里做重试操作。
第三步操作：
画图.这里是大多数开发者比较烦的地方，页面内的所有元素需要组装到一起。所以需要布局样式。
然后canvas的样式是使用坐标轴来玩的，所以需要根据x和y轴来调整样式。且位置单位为px。接下来贴源码吧
//将小程序码绘制到固定位置
setQrcode(context) {
let path = this.data.qtsheXcxCode //小程序码
context.drawImage(path, 75, 450, 75, 75)
},
//将昵称绘制到canvas的固定位置
setName(context) {
if (this.data.userName.length >= 8) {
var title = this.data.userName.substring(0, 7) + '...'
} else {
var title = this.data.userName
}
context.setFontSize(14)
context.fillText(title, 98, 330)
},
//绘制用户头像
setAvatarUrl(context) {
let cx = 30 + 25
let cy = 320 + 25
context.arc(cx, cy, 25, 0, 2 * Math.PI)
context.clip()
let path = this.data.userHeadUrl
context.drawImage(path, 30, 320, 52, 52)
},
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
createNewImg() {
let context = wx.createCanvasContext('mycanvas')
let path = this.data.qtsheBackground
let that = this
context.drawImage(path, 0, 0, 375, 667) //以iPhone 6尺寸大小为标准绘制图片
that.setQrcode(context)
that.setName(context)
that.setAvatarUrl(context)
//绘制图片
context.draw()
context.save()
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
wx.hideLoading()
that.setData({
shareImagePath: res.tempFilePath
})
},
fail: function(res) {
console.log(res.errMsg)
}
}, this)
}, 2000)
},
注意一点的是保存图片时需要延迟，这是老版的写法，没有啥问题，新版写法可以通过draw回调画图成功后调用保存图片的api wx.canvasToTempFilePath。这个时候就不需要写延时保存图片。
savePhoto() {
var that = this
wx.showLoading({
title: '正在保存...',
mask: true
})
setTimeout(() => {
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImagePath,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
that.setData({
isPhotoModel: false,
isCanvas: false
})
}, 300)
},
fail() {
wx.showToast({
title: '保存失败，请刷新页面重试',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
that.setData({
isPhotoModel: false,
isCanvas: false
})
}, 300)
}
})
}, 2500)
}
然后再说一个canvas里绘制圆角头像的方法：
ctx: context, img:图片路径，x:圆的中心的x坐标，y: 圆的中心的y坐标，r:圆的半径
circleImg(ctx, img, x, y, r) {
ctx.save();
var d =2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
image.png
至此，我们的海报就画好了，并且保存图片的步骤也完成了。大家可以去试试，充分利用好海报的便利，遵守微信规范，别诱导分享被封啦。
结语：
第三章就说到这里了，这里介绍了小程序的海报的生成过程，下一章节将会讲到小程序的营销组件老虎机和翻牌组件，以及其他相关功能组件具体可以在微信搜一搜 搜索兼职 然后通过服务直达区找到 《青团社兼职实习》，有什么问题或意见可联系QQ8662054指出。
青团社招聘：
招聘岗位：高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层
简历投递到：hr@qtshe.com || haochen@qtshe.com
职位描述：
1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量
2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案
3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界
