方案比较
想必不少人写小程序的时候会遇到一个令人头疼的功能——生成分享朋友圈图片。 关于生成朋友圈图片常用的有以下几种方案：
- 使用 canvas 绘图并生成
- 使用后端绘图库进行绘制，返回给小程序端
- 使用服务端开一个浏览器进行 HTML 渲染，并截图返回给小程序端
第一种方案：要求较高，canvas 和纯 html 布局相去甚远，零基础学习成本较高，而且在不同的微信浏览器中效果不可预期，想短时间内做出精美可控的生成图片不容易。实操的时候发现了一个非常麻烦的事情：网络图片或者 base64 图片都无法直接在 canvas 里渲染显示，要先下载好传进去。
第二种方案：后端库可以完成较为简单的需求，但字体加载、阴影、圆角、透明等方案效果需要精调，如果文字需要截断或动态伸缩长度时并不容易处理。图片的截取和伸缩自适应也不灵活。而且选用这种方案相当于需要把 UI 布局的工作丢给后端工程师去解决，这不是他们擅长的范围，效果未必会好。
第三种方案：页面的绘制方面，纯前端技术即可完成，难度低，完成度高，但是需要在后端起一个 node 服务开启 puppeteer 去控制服务端 Chrome 浏览器。这种方案的缺点就是成本太高，我们和业界同行都测算过，结果差不多：4 核 16G 的服务器生成图片的 QPS 大概只有 10-20，相当于一秒钟较差情况只能生成 10 张图片，这对于突发的大量分享需求并不能满足，而且这种配置的服务器，不能部署其他服务，只跑这个服务就会用尽大部分资源。
背景
我们的项目第一版采用了第一种解决方案——canvas绘图，学习成本高不说，另外发布到线上出现了一个兼容性的问题。因此在第二版开发时，我考虑找一个人家写好的插件，在GitHub上我找到了一个mp-vue框架的开源项目painter，如果你项目采用的mp-vue搭建的，可以一试。但是我们的小程序使用的是uniapp，因为没有了解过在uniapp中怎么引入mp-vue的组件，放弃了这个方案。之后又寻寻觅吗，在DCloud插件市场，终于找到了它——海报画板。这个插件上手很快，下面我会从最开始引入到使用步骤都写一下。
海报画板使用步骤
- 导入插件
- 导入插件之后会引入在你的项目文件uni_modules目录下面，在你需要的地方直接引入就可以。
3. 具体关于插件的使用方法不再赘述，在这里都有。
附：（如果你绘制的海报中有base64格式的图片，则需要转为本地临时图片）
dealBase64(imageData) {
return new Promise((reslove, reject) => {
// 如果图片字符串不含要清空的前缀,可以不执行下行代码.
// var imageData = base64.replace(/^data:image\/\w+;base64,/, "");
// 声明文件系统
const fs = uni.getFileSystemManager();
// 随机定义路径名称
var times = new Date().getTime();
var codeimg = wx.env.USER_DATA_PATH + '/share' + times + '.png';
// 将base64图片写入
var that = this;
fs.writeFile({
filePath: codeimg,
data: imageData,
encoding: 'base64',
success: (res) => {
// 写入成功了的话，新的图片路径就能用了
reslove(codeimg);
}
});
})
}
复制代码