小程序echarts+canvasdrawer實現頁面轉化圖片並保存到相冊

時間 2019-12-04

標籤程序 echarts+canvasdrawer echarts canvasdrawer 實現頁面轉化圖片保存相冊简体版

原文原文鏈接

小程序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 = {}