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跨域問題 -張鑫旭