当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 12:56:03 HTML5

小程序echarts+canvasdrawer实现页面转换图片并保存到相册代码,测试结果文本,最后画图保存到相册。结合开发时间和使用canvasdrawer组件的各种坑,总结一下开发过程中遇到的一些问题。1.部分Android机型图片输出不执行Android输出图片错位问题,也是异步解决的。measureText注意线上版本库1.9.1+//业务层代码letthat=this//保存图片到本地临时文件//注意图表初始化实例不能输出图片constecComponent=this.selectComponent('#mychart-dom-graph');//获取echarts组件ecComponent.canvasToTempFilePath({//Android机型这里不会成功callbacksuccess:res=>{that.eventDraw(res.tempFilePath)},fail:res=>console.log('Failure',res)});//ec-canvas.js源码canvasToTempFilePath(opt){if(!opt.canvasId){opt.canvasId=this.data.canvasId;}constsystem=wx.getSystemInfoSync().systemctx.draw(true,()=>{//这里微信api在部分安卓机型不会回调,相反ctx.draw(false)清空画布会被执行,导致echarts已经绘制的canvas被清空,输出为空图wx.canvasToTempFilePath(opt,this);});}//修改后的canvasToTempFilePath(opt){if(!opt.canvasId){opt.canvasId=this.data.canvasId;}constsystem=wx.getSystemInfoSync().systemif(/ios/i.test(system)){ctx.draw(true,()=>{wx.canvasToTempFilePath(opt,this);});}else{//异步获取Android模型的绘制层ctx.draw(true,()=>{//断点打印依然不执行setTimeout(()=>{wx.canvasToTempFilePath(opt,this);},1000);}});ctx.draw(true);setTimeout(()=>{//延迟访问wx.canvasToTempFilePath(opt,this);},1000);}},2.OnReady动态修改echarts[options]失败onReady:function(){letthat=this;setTimeout(()=>{//异步解决echarts实例未加载成功无法设置options选项。series[0].data[0].value=that.data.canvasListDatachart.setOption(option);},500);}//提前声明变量letchart=null;varoption={}3.网络图片需要下载到本地,注意配置downloadFile的合法域名,尤其是微信头像链接4.相册授权被拒绝后,按钮不会再弹出授权弹窗,openSetting强制打开设置启用授权5.圆形头像建议剪镂空图覆盖、rect、clip存在bug,难以实现UI效果。推荐查看:微信小程序社区的帖子。6.cancvas要画2倍的图片,否则输出的图片会模糊。参考微信小程序版ECharts。小程序在安卓手机上绘制画布,文字乱七八糟。drawImage绘图在Android设备上是空白的另存为图片并优化图片分辨率。TIPS由于时间关系,很多地方理解的还不够深入,还有很多瑕疵。欢迎提出建议