小顺序echarts+canvasdrawer完成页面转化图片并保存到相册

2023年4月8日 296次阅读 来源: triplydoor

小顺序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倍图，不然输出图片隐约

参考

末了

HTML页面能够运用 html2canvas转换节点天生图片保留

TIPS

因为时候限定，许多处所明白不够深入，瑕疵许多，迎接提出

    原文作者：triplydoor
    原文地址: https://segmentfault.com/a/1190000017503185
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞