javascript 画布已被跨域数据工作污染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18474727/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
canvas has been tainted by cross-origin data work around
提问by Dustin Silk
im writing a script (or editing and hacking things together) to edit the look of images on a page. I know the basics of javascript but this is my first time looking at canvas. so bear with me
我正在编写一个脚本（或一起编辑和修改内容）来编辑页面上图像的外观。我知道 javascript 的基础知识，但这是我第一次看到画布。所以忍受我
I'm getting this error:
我收到此错误：
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
无法从画布获取图像数据，因为画布已被跨域数据污染。
so heres my code snippet throwing the error:
所以继承人我的代码片段抛出错误：
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
height = img.naturalHeight || img.offsetHeight || img.height,
width = img.naturalWidth || img.offsetWidth || img.width,
imgData;
canvas.height = height;
canvas.width = width;
context.drawImage(img, 0, 0);
console.log(context);
try {
imgData = context.getImageData(0, 0, width, height);
} catch(e) {}
now i found this post :
现在我找到了这个帖子：
http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/
http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/
but i have no idea how to make it fit my needs..
但我不知道如何使它适合我的需要..
I know its all due to security and all that - but is there a work around to make it all happen?
我知道这一切都是由于安全性和所有这些 - 但是有没有办法让这一切发生？
Thanks
谢谢
EDIT
编辑
Oh wait.. the error is because you can't getImageData.. so is there away to make it 'local'
哦，等等.. 错误是因为你不能 getImageData.. 所以有没有让它“本地”
回答by markE
To satisfy CORS, you can host your images on a CORS friendly site like dropbox.com
为了满足 CORS，您可以将图像托管在一个对 CORS 友好的网站上，例如 dropbox.com
Then the security error will not be triggered if you speify image.crossOrigin="anonymous":
那么如果你指定 image.crossOrigin="anonymous" 就不会触发安全错误：
var image=new Image();
image.onload=function(){
}
image.crossOrigin="anonymous";
image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/4djSr/
这是代码和小提琴：http: //jsfiddle.net/m1erickson/4djSr/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var image=new Image();
image.onload=function(){
ctx.drawImage(image,0,0);
// desaturation colors
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
var data=imgData.data;
for(var i = 0; i < data.length; i += 4) {
var grayscale= 0.33*data[i]+0.5*data[i+1]+0.15*data[i+2];
data[i]=grayscale;
data[i+1]=grayscale;
data[i+2]=grayscale;
}
// write the modified image data
ctx.putImageData(imgData,0,0);
}
image.crossOrigin="anonymous";
image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=140 height=140></canvas>
</body>
</html>
回答by Michael Silveira
I don't have enough reputation to actually add a comment (but I do have enough to respond to the question, huh??), I just wanted to add to markE's answer that I had to capitalize Anonymous.
我没有足够的声誉来实际添加评论（但我确实有足够的能力来回答这个问题，嗯？？），我只是想在 markE 的答案中添加我必须大写匿名。
image.crossOrigin = "Anonymous"
回答by Snorvarg
I found it works with chrome if you create a windows shortcut like this:
如果您创建这样的 Windows 快捷方式，我发现它适用于 chrome：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
Shut down chrome and start it via your shortcut.
关闭 chrome 并通过您的快捷方式启动它。
Source: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
Related post: Cross-origin image load denied on a local image with THREE.js on Chrome
来源：https: //github.com/mrdoob/three.js/wiki/How-to-run-things-locally
I assume you are working with a local file without any web server.
我假设您正在使用没有任何 Web 服务器的本地文件。
回答by mmla
Try adding crossorigin="anonymous"to the image element. For example
尝试添加crossorigin="anonymous"到图像元素。例如
<img src="http://example.com/foo.jpg" crossorigin="anonymous"/>
回答by chuqdennis
Enabling CORS on the server side is a way out, But that's if you have access to the server side. That way the server serves CORS enabled images.
在服务器端启用 CORS 是一种出路，但前提是您可以访问服务器端。这样服务器提供启用 CORS 的图像。
