小程序canvas drawImage 加載網(wǎng)絡(luò)圖片踩得坑

我的問題已經(jīng)解決了，在這里通過提問這種形式分享下我遇到的問題，有可能會對您有一些幫助！

場景描述

我想在我的頁面里，用canvas動態(tài)生成一張圖片（包含用戶頭像、小程序碼），然后讓用戶保存圖片到相冊，繼而分享圖片到朋友圈，如下圖

問題描述

小程序 canvas 的 drawImage api，即把一張圖片畫在畫布上，第一個參數(shù)為圖片的地址，該地址不能是網(wǎng)絡(luò)圖片，在這個地方有人做出解釋
由于不能使用網(wǎng)絡(luò)圖片，所以需要利用 downloadFile 或 getImageInfo 這兩個api將其緩存到本地

坑所在的地方

其實坑說到底不是 canvas 的坑，而是微信安全域名的坑
當我在開發(fā)者工具中調(diào)試時，一切正常（因為我的開發(fā)者工具默認不校驗安全域名），所以一直沒問題
在手機上的表現(xiàn)：打開調(diào)試模式頭像就加載正常，關(guān)閉調(diào)試模式就加載不出來
想了好長時間，查了好多canvas資料，也沒搞明白問題，高潮來了問題不是出現(xiàn)在canvas身上，而是出現(xiàn) , downloadFile 身上， downloadFile 受安全域名限制，頭像所在的url為 https://wx.qlogo.cn，我萬萬沒想到，微信居然連自己家的域名也擋在門外，真是喪心病狂啊
找到原因了，確實不是 canvas 的鍋，是緩存 downloadFile 的問題
解決方法：將 https://wx.qlogo.cn 配置到安全域名內(nèi)就 ok 了

折騰了一大圈，沒想到居然是這么個問題，有遇到這個問題的朋友可以參考下

回答

編輯回答

失魂人

以上就是自己的答案

2018年6月26日 17:15

編輯回答

入她眼

可否分享一下源碼？

2018年5月25日 00:13

編輯回答

拽很帥

您好啊，我使用 downloadFile 或是 getImageInfo 轉(zhuǎn)成本地還是畫不出來呀，求教.
好了，還是我自己發(fā)現(xiàn)問題了，然后樓主的問題，我在 2.0.8 版沒有出現(xiàn)，也許是騰訊自己加白名單了吧，那個鏈接，下載不同步畫圖，還有指向問題都是造成大家的網(wǎng)絡(luò)圖片畫不出來，我借樓主的地方放個代碼，畫出網(wǎng)絡(luò)圖片，謝謝。

drawPage: function () {
    var that = this; //這個要保存起來，給下面 context.draw(true, that.getTempFilePath);使用
    
    var context = wx.createCanvasContext('share');
    var avatar = this.data.avatar;
    this.setData({
      canvasSwitcher: true
    })
    wx.downloadFile({
      url: avatar,
      success: function (res) {
        if(res.tempFilePath) {
          context.drawImage(res.tempFilePath, 150, 260, 30, 30);
          context.draw(true, that.getTempFilePath);
        }
      }
    })
    var images = '../images/Bitmap.png';
    context.setFillStyle('#f2f2f2');
    context.drawImage(images, 10, 10, 295, 250);
    console.log(avatar)
    context.setFontSize(20);
    context.setFillStyle("#666");
    context.fillText('232', 230, 380);
    context.fillText('累積完成', 200, 400);
    context.fill();
    context.draw(true, this.getTempFilePath);
  },

getTempFilePath:function(){
    console.log(121221)
    wx.canvasToTempFilePath({
      canvasId: 'share',
      success: (res) => {
        this.setData({
          shareTempFilePath: res.tempFilePath
        })
      }
    })
  },

應(yīng)為網(wǎng)絡(luò)圖片下載要花時間，所以不同步，不想等就請畫別的 draw 的第一個參數(shù)寫 true

今天重新修正，上線后發(fā)現(xiàn)圖片保存不了，確實是要把頭像下載地址加到白名單，被坑到了。

2017年12月10日 01:57

編輯回答