Dus*_*ilk 9 javascript canvas cors
我正在编写一个脚本(或编辑和黑客的东西)来编辑页面上的图像外观.我知道javascript的基础知识,但这是我第一次看画布.所以忍受我
我收到这个错误:
无法从画布获取图像数据,因为画布已被跨源数据污染.
所以继承我的代码片段抛出错误:
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) {}
现在我发现这篇文章:
http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/
但我不知道如何使它符合我的需要..
我知道这一切都归功于安全性和所有这一切 - 但是有没有可以解决这一切？
谢谢
编辑
哦等等..错误是因为你不能getImageData ..所以有没有让它'本地'
mar*_*rkE 23
要满足CORS,您可以将您的图像托管在友好的CORS网站上,例如dropbox.com
如果您编写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/
<!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>
我没有足够的声誉来实际添加评论(但我确实有足够的回答这个问题,嗯??),我只想添加到markE的答案,我必须将Anonymous大写.
image.crossOrigin = "Anonymous"
| 归档时间： |
|
| 查看次数： |
31486 次 |
| 最近记录： |