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跨域问题 -张鑫旭