Question

我想动态修改先前在画布中绘制的图像中的所有像素，但是，我不知道为什么，我不能。这是代码。

加价：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <canvas style="width:200px;height:200px;background:blue" id="prueba"></canvas>
        <p style="margin-top:50px;margin-left:100px;background:red;width:100px" onclick="changeIt()"> Change</p>
        <script src="js/main.js"></script>
    </body>
</html>

这是脚本（main.js）：

    $(document).ready(function(){
    var c=document.getElementById("prueba");
    ctx=c.getContext("2d");
    ctx.fillStyle="green";
    ctx.fillRect(10,10,50,50);
    base_image = new Image();
    base_image.src = 'img/p.jpg';
    base_image.onload = function(){
        ctx.drawImage(base_image, 10, 10);
    }
});

function changeIt(){
    var imgData=ctx.getImageData(0,0,1,1);
    var red=imgData.data[1];
    console.log(imgData.length);
    console.log(red);
}

我收到此错误：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

没有任何意义，因为我在当地工作。

getImageData和.data（）

0 个答案: