游客
标题:跨域名访问资源的问题 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><
[<<][[1]][2][3][>>]
查看评论(0)
发表评论
首页