crossOrigin属性解决canvas图片getImageData跨域

2018-02-11 14:05:50来源:http://www.zhangxinxu.com/wordpress/2018/02/crossorigin-canv作者:张鑫旭人点击

分享

这篇文章发布于 2018年02月10日,星期六,23:27,归类于canvas相关。 阅读 48 次, 今日 48 次


byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7378


本文可全文转载,但需要保留原作者和出处。


一、canvas图片getImageData跨域问题

对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的 drawImage() API绘制出来。但是如果你想更进一步,通过 getImageData() 方法获取图片的完整的像素信息,则多半会出错。


举例来说,使用下面代码获取github上的自己头像图片信息:


var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
context.drawImage(this, 0, 0);
context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

结果在Chrome浏览器下显示如下错误:


Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.


Firefox浏览器错误为:


SecurityError: The operation is insecure.

那有没有什么办法可以解决这个问题呢?


一、HTML crossOrigin属性解决资源跨域问题

在HTML5中,有些元素提供了支持CORS(Cross-Origin Resource Sharing)(跨域资源共享)的属性,这些元素包括 <img> , <video> , <script> 等,而提供的属性名就是 crossOrigin 属性。


因此,上面的跨域问题可以这么处理:


var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = '';
img.onload = function () {
context.drawImage(this, 0, 0);
context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

增加一个 img.crossOrigin = '' 即可,虽然JS代码这里设置的是空字符串,实际上起作用的属性值是 anonymous 。


crossOrigin 可以有下面两个值:



关键字
释义


anonymous
元素的跨域资源请求不需要凭证标志设置。
use-credentials
元素的跨域资源请求需要凭证标志设置,意味着该请求需要提供凭证。

其中,只要 crossOrigin 的属性值不是 use-credentials ,全部都会解析为 anonymous ,包括空字符串,包括类似 'abc' 这样的字符。


例如:


img.crossOrigin = 'abc';
console.log(img.crossOrigin);// 结果是'anonymous'


另外还有一点需要注意,那就是虽然没有 crossOrigin 属性,和设置 crossOrigin="use-credentials" 在默认情况下都会报跨域出错,但是性质上却不一样,两者有较大区别。


crossOrigin兼容性

IE11+,Safari,Chrome,Firefox浏览器均支持,IE9和IE10会报SecurityError安全错误,如下截图:



三、结束语

最近工作中学到的一点小经验,希望可以帮到遇到类似问题的小伙伴。


感谢阅读!



本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。


本文地址: http://www.zhangxinxu.com/wordpress/?p=7378


(本篇完)


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台