HTML5 Canvas getImageData安全錯誤

Question

我想將彩色圖像更改為灰度，但是當我嘗試使用getImageData時出現安全性錯誤。

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>

Answer 1

最近我有同樣的問題。 您必須在同一域（作為代碼）上具有圖像，或者在圖像所在的服務器上設置跨源。

Access-Control-Allow-Origin：*

HTML5 Canvas getImageData安全錯誤

問題描述

1 個解決方案

解決方案1
2 已采納 2014-03-16 12:23:10

HTML5 Canvas getImageData安全錯誤

問題描述

1 個解決方案

解決方案1 2 已采納 2014-03-16 12:23:10

解決方案1
2 已采納 2014-03-16 12:23:10