Javascript HTML5画布getImageData安全性错误
我想将彩色图像更改为灰度,但在尝试使用getImageData时出现安全错误Javascript HTML5画布getImageData安全性错误,javascript,html,canvas,html5-canvas,cors,Javascript,Html,Canvas,Html5 Canvas,Cors,我想将彩色图像更改为灰度,但在尝试使用getImageData时出现安全错误 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 我知道这个错误到处都在讨论,但没有一个明确的解决方案。请帮忙 <html> <script> function gra
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
我知道这个错误到处都在讨论,但没有一个明确的解决方案。请帮忙
<html>
<script>
function grayscale()
{
var myCanvas = document.getElementById("c1");
var myCanvasContext = myCanvas.getContext("2d");
var img = document.getElementById("myImage");
img.crossOrigin = "anonymous";
var imgWidth = img.width;
var imgHeight = img.height;
myCanvas.width = imgWidth;
myCanvas.height = imgHeight;
myCanvasContext.drawImage(img,0,0);
var imageData = myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
for (j=0; j<imageData.height; i++)
{
for (i=0; i<imageData.width; j++)
{
var index=(i*4)*imageData.width+(j*4);
var red=imageData.data[index];
var green=imageData.data[index+1];
var blue=imageData.data[index+2];
var alpha=imageData.data[index+3];
var average=(red+green+blue)/3;
imageData.data[index]=average;
imageData.data[index+1]=average;
imageData.data[index+2]=average;
imageData.data[index+3]=alpha;
}
}
}
</script>
<body>
<img id="myImage" onload="grayscale()" src="doggie.png"></img>
<canvas id = "c1" width = "200px" height = "200px" style="border:1px solid #000000;">
</canvas>
</body>
</html>
函数灰度()
{
var myCanvas=document.getElementById(“c1”);
var mycanvascoxt=myCanvas.getContext(“2d”);
var img=document.getElementById(“myImage”);
img.crossOrigin=“匿名”;
var imgWidth=img.width;
var imgHeight=img.高度;
myCanvas.width=imgWidth;
myCanvas.height=imgHeight;
myCanvasContext.drawImage(img,0,0);
var imageData=myCanvasContext.getImageData(0,0,imgWidth,imgHeight);
对于(j=0;j最近我也有同样的问题。
您必须在同一域(与代码)上有映像,或者在映像所在的服务器上设置交叉源
访问控制允许源代码:这可能会有帮助:干杯!我遇到了相同的问题,除了我刚刚在Paint中创建并保存在与代码相同的目录中的图像出现了问题!这是什么!