Javascript Получить данные пикселей изображения

Question

Мне нужно загрузить файл png с моего компьютера и l oop через каждое значение пикселя. Я пробовал canvas, но он ломается от междоменных вещей, которые я не понимаю ...

var img = new Image(); 
img.src = "map.png";

var canvas = document.getElementById("secondaryCanvas");
var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, 30, 30);

console.log(ctx.getImageData(0,0,1,1));

... Иногда это работает, иногда нет? ... Я абсолютно потерян

Answer 1

Вы не можете прочитать данные пикселей, если страница загружается непосредственно из файловой системы. Вы должны загрузить страницу с веб-сервера. Установите apache и загрузите его с localhost

. О том факте, что это иногда «работает», зависит от того, было ли изображение нарисовано на холсте при вызове getImageData.

, если изображение не был загружен, вы можете вызвать getImageData, потому что вы читаете не данные изображения, а пустой холст.

если вы вызываете getImageData внутри события загрузки изображения, код всегда будет неуспешным

var img = new Image(); 
img.onload = function() {
    console.log(this)
    var canvas = document.getElementById("secondaryCanvas");
    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0);

    console.log(ctx.getImageData(100,100,1,1));
}
img.src = "map.png";