//业务层代码
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);
}
},
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倍图，否则输出图片模糊
小程序绘制圆形头像框
小程序绘制圆形头像框
ctx.save()
ctx.beginPath()
//首先绘制一个圆形的弧线，大小位置根据你的需求而定，也就是说你想让它放在什么位置，就让它放在什么位置
ctx.arc(width / 8, height / 3 + 0.10 * width + 20, 0.10 * width, 0, 2 * Math.PI)
// //这块我是用获取到的width和height来确定头像的位置
ctx.setStrokeStyle('#000')
ctx.stroke()
//使用clip() 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
ctx.clip()
ctx.drawImage(imgPath, width / 8 - 0.10 * width, height / 3 + 20, 0.20 * width, 0.20 * width)
ctx.restore()
原文地址 ： https://segmentfault.com/a/1190000017503185
