本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
最近在使用 Canvas 时,遇到了跨域问题。本文介绍如何解决这类跨域问题。
具体的错误信息如下:
Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。
看下面的一个例子:
var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // 业余草:www.xttblog.com 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';
运行后,Firefox浏览器错误为:
SecurityError: The operation is insecure.
那有没有什么办法可以解决这个问题呢?
在HTML5中,有些元素提供了支持CORS(Cross-Origin Resource Sharing)(跨域资源共享)的属性,这些元素包括<img>,<video>,<script>等,而提供的属性名就是crossOrigin属性。
因此,上面的跨域问题可以这么处理:
var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // 业余草:www.xttblog.com 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,包括空字符串,包括类似'xttblog'这样的字符。
例如:
img.crossOrigin = 'xttblog'; console.log(img.crossOrigin);// 结果是'anonymous'
另外还有一点需要注意,那就是虽然没有crossOrigin属性,和设置crossOrigin="use-credentials"在默认情况下都会报跨域出错,但是性质上却不一样,两者有较大区别。
IE11+,Safari,Chrome,Firefox浏览器均支持,IE9和IE10会报SecurityError安全错误。
最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!
本文原文出处:业余草: » Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ 问题解决方法