小程序 echarts+canvasdrawer 实现页面转化图片并保存到相册
场景：小程序测试活动，实现 echarts 雷达图展示不同的结果、微信头像、二维码、测试结果文字，最终绘制出一张图片用户保存相册。考虑到开发时间及各种坑使用了 canvasdrawer 组件，其中开发过程中遇到的一些问题总结。
1. 安卓部分机型图片输出不执行
安卓输出图片错位问题同样异步解决
measureText 注意线上版本库 1.9.1+
// 业务层代码
let that = this
// 保存图片到临时的本地文件
// 注意 chart 初始化实例不能输出图片
const ecComponent = this.selectComponent(‘#mychart-dom-graph’);// 获取 echarts 组件
ecComponent.canvasToTempFilePath({
// 安卓机型此处不会成功回调
success: res => {
that.eventDraw(res.tempFilePath)
},
fail: res => console.log(‘ 失败 ’, res)
});
//ec-canvas.js 源码
canvasToTempFilePath(opt) {
if (!opt.canvasId) {
opt.canvasId = this.data.canvasId;
}
const system = wx.getSystemInfoSync().system
ctx.draw(true, () => {// 此处微信 api 在安卓部分机型不会回调，相反 ctx.draw(false) 清空画布会执行，导致 echarts 已经绘制画布清空，输出为空图片
wx.canvasToTempFilePath(opt, this);
});
}
// 修改后
canvasToTempFilePath(opt) {
if (!opt.canvasId) {
opt.canvasId = this.data.canvasId;
}
const system = wx.getSystemInfoSync().system
if (/ios/i.test(system)) {
ctx.draw(true, () => {
wx.canvasToTempFilePath(opt, this);
});
} else {// 针对安卓机型异步获取已绘制图层
ctx.draw(true,()=>{
// 断点打印依旧不会执行 setTimeout(() => {wx.canvasToTempFilePath(opt, this);}, 1000);}});
ctx.draw(true);
setTimeout(() => {// 延迟获取
wx.canvasToTempFilePath(opt, this);
}, 1000);
}
},
2.onReady 动态修改 echarts[options] 失败
onReady: function() {
let that = this;
setTimeout(() => {// 异步解决 echarts 实例没有加载成功的无法设置 options
option.series[0].data[0].value = that.data.canvasListData
chart.setOption(option);
}, 500);
}
<!– 备注 –>
// 提前声明变量
let chart = null;
var option = {}
3. 网络图片需下载到本地，注意配置 downloadFile 合法域名，尤其是微信头像链接
4. 相册授权拒绝后，button 不会再次弹出授权弹窗，openSetting 强制打开设置开启授权。
5. 圆形头像建议切镂空图覆盖，rect，clip 有 bug 很难实现 UI 效果
建议查看：微信小程序社区的帖子。
6.cancvas 要画 2 倍图，否则输出图片模糊
参考
ECharts 的微信小程序版本。
小程序在安卓手机上绘制 canvas，文字错乱。
drawImage 画图在 Android 真机上显示空白
安卓 canvas 组件 draw 函数的回调不执行
wx.canvasToTempFilePath 安卓手机无法生成图片
安卓手机获取不到 canvasToTempFilePath 路径的图片
canvasdrawer
最后
HTML 页面可以使用 html2canvas 转换节点生成图片保存
基于 html2canvas 实现网页保存为图片及图片清晰度优化
TIPS
由于时间限制，很多地方理解不够深刻，瑕疵很多，欢迎提出