摘要：小程序?qū)崿F(xiàn)頁(yè)面轉(zhuǎn)化圖片并保存到相冊(cè)場(chǎng)景小程序測(cè)試活動(dòng)，實(shí)現(xiàn)雷達(dá)圖展示不同的結(jié)果微信頭像二維碼測(cè)試結(jié)果文字，最終繪制出一張圖片用戶(hù)保存相冊(cè)。圓形頭像建議切鏤空?qǐng)D覆蓋，，有很難實(shí)現(xiàn)效果建議查看微信小程序社區(qū)的帖子。

場(chǎng)景：小程序測(cè)試活動(dòng)，實(shí)現(xiàn)echarts雷達(dá)圖展示不同的結(jié)果、微信頭像、二維碼、測(cè)試結(jié)果文字，最終繪制出一張圖片用戶(hù)保存相冊(cè)?？紤]到開(kāi)發(fā)時(shí)間及各種坑使用了canvasdrawer組件，其中開(kāi)發(fā)過(guò)程中遇到的一些問(wèn)題總結(jié)。

安卓輸出圖片錯(cuò)位問(wèn)題同樣異步解決
measureText注意線(xiàn)上版本庫(kù)1.9.1+

//業(yè)務(wù)層代碼
let that = this
    // 保存圖片到臨時(shí)的本地文件
    //注意chart初始化實(shí)例不能輸出圖片
    const ecComponent = this.selectComponent("#mychart-dom-graph");//獲取echarts組件
    ecComponent.canvasToTempFilePath({
    //安卓機(jī)型此處不會(huì)成功回調(diào)
      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在安卓部分機(jī)型不會(huì)回調(diào) ，相反ctx.draw(false)清空畫(huà)布會(huì)執(zhí)行，導(dǎo)致echarts已經(jīng)繪制畫(huà)布清空，輸出為空?qǐng)D片         
          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 {//針對(duì)安卓機(jī)型異步獲取已繪制圖層
      ctx.draw(true,()=>{
        //斷點(diǎn)打印依舊不會(huì)執(zhí)行setTimeout(() => {wx.canvasToTempFilePath(opt, this);}, 1000);}});
        ctx.draw(true);
        setTimeout(() => {//延遲獲取
          wx.canvasToTempFilePath(opt, this);
        }, 1000);
      }
    },

 onReady: function() {
    let that = this;
    setTimeout(() => {//異步解決echarts實(shí)例沒(méi)有加載成功的無(wú)法設(shè)置options
      option.series[0].data[0].value = that.data.canvasListData
      chart.setOption(option);
    }, 500);
  }

//提前聲明變量
let chart = null;
var option = {}

建議查看：微信小程序社區(qū)的帖子。

ECharts 的微信小程序版本。

小程序在安卓手機(jī)上繪制canvas，文字錯(cuò)亂。

drawImage畫(huà)圖在A(yíng)ndroid真機(jī)上顯示空白

安卓 canvas組件draw函數(shù)的回調(diào)不執(zhí)行

wx.canvasToTempFilePath安卓手機(jī)無(wú)法生成圖片

安卓手機(jī)獲取不到canvasToTempFilePath路徑的圖片

canvasdrawer

HTML頁(yè)面可以使用 html2canvas轉(zhuǎn)換節(jié)點(diǎn)生成圖片保存

基于html2canvas實(shí)現(xiàn)網(wǎng)頁(yè)保存為圖片及圖片清晰度優(yōu)化

由于時(shí)間限制，很多地方理解不夠深刻，瑕疵很多，歡迎提出