Ошибка локальных данных перекрестного происхождения

Я пытаюсь создать игру на JavaScript, и мне нужно получить пиксельные данные из изображения. я использую getImageData (). data; и он работает нормально в Internet Explorer, но в Chrome я получаю эту ошибку:

Uncaught SecurityError: не удалось выполнить getImageData в CanvasRenderingContext2D: холст был испорчен данными из разных источников.

Я искал решения, но ничего не работает, у кого-нибудь есть хорошая идея?

вот мой код: `var width = 600, height = 400, img, canvas, 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();`

Файл работает локально, а не на сервере.


javascript canvas html getimagedata
person 23456787654    schedule 03.04.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если вы загрузите свою страницу или файл с помощью file: // ..., это также вызовет проблемы с CORS.

При локальном тестировании всегда используйте локальный сервер, чтобы вы могли загружать файлы с localhost.

Также побочный вопрос: не забудьте использовать обработчик onload для изображения:

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

arrow_upward
0
arrow_downward

Попытайся:

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


}
person toto    schedule 02.07.2016