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

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

場(chǎng)景描述

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

問(wèn)題描述

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

坑所在的地方

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

折騰了一大圈，沒(méi)想到居然是這么個(gè)問(wèn)題，有遇到這個(gè)問(wèn)題的朋友可以參考下

回答

編輯回答

失魂人

以上就是自己的答案

2018年6月26日 17:15

編輯回答

入她眼

可否分享一下源碼？

2018年5月25日 00:13

編輯回答

拽很帥

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

drawPage: function () {
    var that = this; //這個(gè)要保存起來(lái)，給下面 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ò)圖片下載要花時(shí)間，所以不同步，不想等就請(qǐng)畫(huà)別的 draw 的第一個(gè)參數(shù)寫(xiě) true

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

2017年12月10日 01:57

編輯回答