小程序echarts+canvasdrawer实现页面转化图片并保存到相册

38次阅读

共计 1789 个字符，预计需要花费 5 分钟才能阅读完成。

小程序 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 倍图，否则输出图片模糊
参考