IE throws Security Error when calling toDataUrl on canvas

图片存储在本地时，是默认没有域名的，用getImageData方法时，浏览器会判定为跨域而报错！

摘了一段网上的解析：

1、首先没有服务器环境（如：本地的html网页，操作本地的图片），

就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误。

因为本地测试用的图片是文件夹内的，js跨域限制是不能获取非同一域名下的数据的，

而本地的位置是没有域名的，所以浏览器都认为你是跨域，导致报错。

2、为了阻止欺骗，浏览器会追踪image data。

当把一个和canvas的域不同的图片放到canvas上，这个canvas就成为“tainted”(被污染的)，浏览器就不让你操作该canvas的任何像素。

是为了阻止多种类型的XSS/CSRF攻击（两种典型的跨站攻击）。

 

其他瀏覽器可以設置 cross-origin 屬性解決;

同時需要服務器也為圖片加上允許跨域返回頭： header('Access-Control-Allow-Origin:*')

 

ie不支持，則通借助ajax和URL.createObjectURL()方法曲线救国

或者使用第三方庫  canvg

 

參考 參考2 參考3 參考4