не может получить данные пикселя с холста

Question

Я загружаю черно-белое изображение с моего компьютера на веб-страницу, а затем рисую изображение на холсте. Затем я хочу получить цвет первого пикселя. Вот функция JavaScript Я использую:

function loadImage(){ 
    var c=document.getElementById("canvas"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("first"); 
    ctx.drawImage(img,0,0); 
    var z1=ctx.getImageData(0, 0, 1, 1).data[0]; 
    document.getElementById("1").value=z1; 
}; 

Я получаю следующее сообщение об ошибке:

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

Любые идеи, как я могу достигнуть мои требования? Это часть проекта, над которым я работаю, где я хочу создать генетический алгоритм, который рисует данную картину. Важной частью этого проекта является сравнение пикселей от исходного изображения (загруженного в холст) на холст, заполненный псевдослучайными пикселями. Затем я вношу небольшую дисперсию в пиксели, чтобы развить ее по отношению к исходному изображению.

Если я рисую холст вручную (используя fillRect), я могу получить данные пикселей, используя 'getImageData'. Однако, когда я рисую холст с помощью изображения (drawImage), я получаю вышеупомянутую ошибку.

Пожалуйста, помогите.

Edit: Я посмотрел на: How to fix getImageData() error The canvas has been tainted by cross-origin data?

Но это не так. Я загружаю изображение с моего компьютера. У меня просто есть файлы .html, .js и .png в той же папке и запустите файл .html.

Answer 1

Хорошо, я установил WAMP, поместил все в папку «www» и запустил его оттуда. Работал.