canvas圖片跨域實踐解惑

我只用大寶發表於2019-01-11
Canvas跨域

首先，這篇文章很短，也就五分鐘時間，我把我實踐出來的一些東西分享出來，有不對的地方歡迎指正。

一般canvas擷取圖片時解決跨域手段

var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
 
      var img = new Image();
      img.crossOrigin = '';
      img.onload = function () {
            context.drawImage(img, 0, 0);
            context.getImageData(0, 0, this.width, this.height);
      };
      img.src = 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4023861722,833490642&fm=58';
複製程式碼

重點就是 img.crossOrigin = ''; 今天我在如以上流水線操作時，在裁剪時控制檯報錯了，資訊如下：

報錯資訊
請求頭如下：

請求頭

這個origin:null很扎眼啊，我明明已經設定了允許圖片跨域了啊，怎麼還會返回null呢？ 據我的實踐和理解是，這裡面涉及HTML屬性（attr）和DOM屬性（property）問題，img屬於html標籤，可以給它的cross-origin屬性設定值，比如：

var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
 
      var img = new Image();
      // img.crossOrigin = '';
      img.setAttribute('cross-origin', '');
      img.onload = function () {
            context.drawImage(img, 0, 0);
            context.getImageData(0, 0, this.width, this.height);
      };
      img.src = 'http://pic27.nipic.com/20130329/890845_115317964000_2.jpg';
複製程式碼

效果：

效果

總結： 實驗了很多圖片資源，比如git的avatar是沒問題的，不過如果伺服器對資源目錄設定了許可權的話，即使跨域也是請求不成功的，一般會報403 Forbidden，那就沒辦法了。 基本就這樣了，如果有使用上的問題，歡迎回來指正。 另， 祝生活愉快。

參考： 解決canvas圖片getImageData,toDataURL跨域問題 -張鑫旭

相關文章