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