跨域名访问资源的问题 HTML5 Canvas getImageData img.crossOrigin
利用 canvas 取得图片的data，如果 img.src是来自其它域名的图片，浏览器便会禁止执行
例如代码：
<canvas id="example" width="300" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<script type="text/javascript">
var example = document.getElementById('example');
var context = example.getContext('2d');
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);
var myImageData = context.getImageData(210, 210, 1, 1);
console.log(myImageData);
};
img.src = "test.png";
</script>
使用了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.看下边的代码就知道怎么解决了：
<!DOCTYPE html>
<html>
<head>
<title>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</title>
<script type="text/javascript">
function initialize() {
//will fail here if no canvas support
try {
var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');
var img = new Image();
img.crossOrigin = '';
//domain needs to be different from html page domain to test cross origin security
img.src = 'http://lobbydata.com/Content/images/bg_price2.gif'; // 关于换这个地址出错的说明地址：http://camnpr.com/TuiJianTools/html5/canvas-cross-domain-images.html
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex.Message + "</span>";
}
//will fail here if security error
img.onload = function () {
try {
var start = new Date().getTime();
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var url = can.toDataURL(); // if read succeeds, canvas isn't dirty.
//get pixels
var imgd = ctx.getImageData(0, 0, img.width, img.width);
var pix = imgd.data;
var len = pix.length;
var argb = []; //pixels as int
for (var i = 0; i < len; i += 4) {
argb.push((pix[i + 3] << 24) + (pix[i] << 16) + (pix[i + 1] << 8) + pix[i + 2]);
}
var end = new Date().getTime();
var time = end - start;
document.getElementById("results").innerHTML = "<span style='color:Green;'>" +
"Success: Your browser supports CORS for cross domain images in Canvas <br>"+
"Read " + argb.length+ " pixels in "+ time+"ms</span>";
} catch (ex) {
document.getElementById("results").innerHTML = "<span style='color:Red;'>Failed: " + ex + "</span>";
}
}
}
</script>
</head>
<body onload="initialize()">
<h2>Canvas Cross Origin Image Test: Testing for Canvas Cross Domain Image CORS Support</h2>
<h2><a href="http://camnpr.com/TuiJianTools/html5/using-cross-domain-images-in-webgl-and.html">What is CORS Image Security?</a></h2>
<h1 id="results" style="color:Orange;">Testing...</h1>
<canvas id="mycanvas"></canvas>
<br />
<a href="/Example/List">More Examples</a>
</body>
</html>
解决办法是： 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
相关文章
- 分析Object #
的drawImage没有作用的原因 (2014-5-26 13:49:15) - createObjectURL方法 实现本地图片预览(2014-5-16 17:29:25)
- javascript生成缩略图后上传并利用canvas重绘(2014-5-16 14:37:41)
- 对话《JavaScript高级程序设计》作者Nicholas C. Zakas(2014-5-4 11:30:35)
- js和html5(canvas)实现手机端刮刮卡抽奖效果完美兼容android/IOS/PC(2014-4-15 12:22:43)
- 这些，前端用过吗？高级前端开发都学过哪些东西？(2014-2-17 15:26:2)
- 百度文本编辑器UEditor(图片的在线管理中)增加图片删除功能【.net版】(2014-2-17 12:14:19)
- 丰富直观的设计 用户体验设计中的巧妙过渡(2014-2-13 14:11:10)
- m3u8是什么？单码/多码率适配流 m3u8最适合CDN来分发 m3u8可以做切片文件 HTML5 Video播放视频格式(2014-2-10 16:12:45)
- Chrome 浏览器跨域和安全访问问题 使用 chrome的命令行标记：disable-web-security 参数联调线上数据(2014-1-19 11:35:0)
