发表日期:2019-10 文章编辑:小灯 浏览次数:1142
场景:小程序测试活动,实现echarts雷达图展示不同的结果、微信头像、二维码、测试结果文字,最终绘制出一张图片用户保存相册。考虑到开发时间及各种坑使用了canvasdrawer组件,其中开发过程中遇到的一些问题总结。
- 安卓输出图片错位问题同样异步解决
- 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);
}
},
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 = {}
建议查看:微信小程序社区的帖子。
HTML页面可以使用 html2canvas转换节点生成图片保存
由于时间限制,很多地方理解不够深刻,瑕疵很多,欢迎提出
日期:2019-11 浏览次数:4729
日期:2019-11 浏览次数:11151
日期:2019-11 浏览次数:3586
日期:2019-11 浏览次数:4501
日期:2019-11 浏览次数:4598
日期:2019-11 浏览次数:6254
日期:2019-11 浏览次数:4520
日期:2019-11 浏览次数:14968
日期:2019-11 浏览次数:3877
日期:2019-11 浏览次数:5631
日期:2019-11 浏览次数:4454
日期:2019-11 浏览次数:3804
日期:2019-11 浏览次数:9545
日期:2019-11 浏览次数:7463
日期:2019-11 浏览次数:4173
日期:2019-11 浏览次数:3572
日期:2019-11 浏览次数:8083
日期:2019-11 浏览次数:3826
日期:2019-11 浏览次数:3994
日期:2019-11 浏览次数:4061
日期:2019-11 浏览次数:3607
日期:2019-11 浏览次数:4219
日期:2019-11 浏览次数:9378
日期:2019-11 浏览次数:4411
日期:2019-11 浏览次数:4299
日期:2019-11 浏览次数:3907
日期:2019-11 浏览次数:11212
日期:2019-11 浏览次数:6523
日期:2019-11 浏览次数:6767
日期:2019-11 浏览次数:4126
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.