本地跨源数据错误

时间:2015-04-03 10:33:09

标签: javascript html html5 canvas getimagedata

我正在尝试使用JavaScript制作游戏,我需要从图像中获取pixeldata。我正在使用getImageData()。data;它在Internet Explorer上运行良好,但在Chrome上我收到此错误:

  

Uncaught SecurityError:无法在'CanvasRenderingContext2D'上执行'getImageData':画布已被跨源数据污染。

我一直在寻找解决方案,但似乎没有任何效果,任何人都有一个好主意?

这是我的代码:` VAR             宽度= 600,             身高= 400,             IMG,             帆布,             CTX;

    function main() {
        canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        canvas.width = width;
        canvas.height = height;
        document.body.appendChild(canvas);

        init();
        loop();

    }

    function init() {
        img = new Image();
        img.src = "test.png";


    }

    function update() {

    }

    function render() {
        ctx.drawImage(img, 0, 0);
        var data = ctx.getImageData(10, 10, 1, 1).data;
        console.log(data);

    }

    function loop() {
        window.requestAnimationFrame(loop);

        update();
        render();
    }

    main();`

该文件正在运行localy,而不是在服务器上运行。

2 个答案:

答案 0 :(得分:1)

如果使用file://加载页面或文件,它也会触发CORS问题。

在本地测试时,请始终使用本地服务器,以便从localhost加载文件。

另外还有一个问题:请记住对图像使用onload处理程序:

function init() {
    img = new Image();
    img.onload = ...   // don't start loop without it...
    img.src = "test.png";
}

答案 1 :(得分:0)

试一试:

.contact-container-main {
        width: 900px;
        height: 600px;
        margin: 100px auto;
        position: relative;
        background-color: #808080;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
       -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   }
   .contact-container-sub {
       width: 250px;
       height: 580px;
       position: absolute;
       margin: 10px;
       background-color: #000000;
       right: 0;
       top: 0;
    }