画布已被跨源数据工作污染 [英] canvas has been tainted by cross-origin data work around
问题描述
在编写脚本（或编辑和黑客入侵）以编辑页面上的图像的外观。我知道javascript的基础，但这是我第一次看着画布。所以忍受我
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
我收到此错误：
无法获取图片数据
因此，我的代码段会抛出错误：
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 /
但我不知道如何使它适合我需要..
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?
感谢
感谢
EDIT 错误是因为你不能getImageData ..所以有让它'local'
Oh wait.. the error is because you can't getImageData.. so is there away to make it 'local'
推荐答案
可以在一个CORS友好的网站上托管您的图像，如dropbox.com
To satisfy CORS, you can host your images on a CORS friendly site like dropbox.com
然后，如果您指定image.crossOrigin =anonymous，则不会触发安全错误：
Then the security error will not be triggered if you speify image.crossOrigin="anonymous":
var image=new Image();
image.onload=function(){
}
image.crossOrigin="anonymous";
image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";
这里是代码和小提琴：http://jsfiddle.net/m1erickson/4djSr/
Here is code and a Fiddle: 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>
这篇关于画布已被跨源数据工作污染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
