跨域名访问资源的问题 HTML5 Canvas getImageData img.crossOrigin
分类：Javascript| 发布：佚名| 查看：18751 | 发表时间：2014/5/26
利用 canvas 取得图片的data，如果 img.src是来自其它域名的图片，浏览器便会禁止执行
例如代码：
01 | <canvas id="example" width="300" height="300"> |
02 | This text is displayed if your browser does not support HTML5 Canvas. |
04 | <script type="text/javascript"> |
05 | var example = document.getElementById('example'); |
06 | var context = example.getContext('2d'); |
07 | var img = new Image(); |
08 | img.onload = function(){ |
09 | context.drawImage(img,0,0); |
10 | var myImageData = context.getImageData(210, 210, 1, 1); |
11 | console.log(myImageData); |
使用了Html5的Canvas画布标签，在canvas里加入本服务器的图片时能够很好得运行。但是当用了跨域的图片地址后在FireFox里可以运行，而在Chrome则报如下错误（IE下也不可运行）：
Image from origin 'http://sdimage.b0.upaiyun.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
看下边的代码就知道怎么解决了：
04 | <title>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</title> |
05 | <script type="text/javascript"> |
06 | function initialize() { |
08 | //will fail here if no canvas support |
10 | var can = document.getElementById('mycanvas'); |
11 | var ctx = can.getContext('2d'); |
12 | var img = new Image(); |
14 | //domain needs to be different from html page domain to test cross origin security |
17 | document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>"; |
20 | //will fail here if security error |
21 | img.onload = function () { |
23 | var start = new Date().getTime(); |
24 | can.width = img.width; |
25 | can.height = img.height; |
26 | ctx.drawImage(img, 0, 0, img.width, img.height); |
27 | var url = can.toDataURL(); // if read succeeds, canvas isn't dirty. |
29 | var imgd = ctx.getImageData(0, 0, img.width, img.width); |
32 | var argb = []; //pixels as int |
33 | for (var i = 0; i < len; i += 4) { |
34 | argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]); |
36 | var end = new Date().getTime(); |
37 | var time = end - start; |
38 | document.getElementById("results").innerHTML = "<span style='color:Green;'>" + |
39 | "Success: Your browser supports CORS for cross domain images in Canvas |
41 | "Read " + argb.length+ " pixels in "+ time+"ms</span>"; |
43 | document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>"; |
49 | <body onload="initialize()"> |
50 | <h2>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</h2> |
52 | <h1 id="results" style="color:Orange;">Testing...</h1> |
53 | <canvas id="mycanvas"></canvas> |
56 | <a href="/Example/List">More Examples</a> |
解决办法是： img.crossOrigin = '';
如果不加img.crossOrigin='';，那么会报错：
Failed: SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
关于读者提出的，换图片的URL（比如：http://bubuol.com/skins/bubuol1/images/logo.gif）会报错的问题
原因分析：
解决办法：通过设置头信息（Access-Control-Allow-Origin）
详情查看地址：http://camnpr.com/TuiJianTools/html5/canvas-cross-domain-images.html
