小程式生成二維碼圖片儲存相簿並分享到朋友圈

triplydoor發表於2018-12-25

小程式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

由於時間限制，很多地方理解不夠深刻，瑕疵很多，歡迎提出

相關文章