getImageData() возвращает все нули

Question

Я пытаюсь вывести значения пикселей из изображения. Изображение загружается правильно; другой ответ здесь предложил, чтобы browswer пытался прочитать пиксели до того, как изображение закончит загрузку, но я вижу, что он загружен к моменту срабатывания alert().

function initContext(canvasID, contextType) 
{ 
    var canvas = document.getElementById(canvasID); 
    var context = canvas.getContext(contextType); 
    return context; 
} 

function loadImage(imageSource, context) 
{ 
    var imageObj = new Image(); 
    imageObj.onload = function() 
    { 
     context.drawImage(imageObj, 0, 0); 
    }; 
    imageObj.src = imageSource; 
    return imageObj; 
} 

function readImage(imageData) 
{ 
    console.log(); 
    console.log(imageData.data[0]); 
} 

var context = initContext('canvas','2d'); 
var imageObj = loadImage('images/color-test.png',context); 
var imageData = context.getImageData(0,0,10,10); 
alert(); 
readImage(imageData); 

Answer 1

Image.onload() вызывается асинхронно, когда изображение было загружено. Это может произойти после того, как ваш текущий код вызывает context.getImageData().

Следующий код должен работать:

function initContext(canvasID, contextType) 
{ 
    var canvas = document.getElementById(canvasID); 
    var context = canvas.getContext(contextType); 
    return context; 
} 

function loadImage(imageSource, context) 
{ 
    var imageObj = new Image(); 
    imageObj.onload = function() 
    { 
     context.drawImage(imageObj, 0, 0); 
     var imageData = context.getImageData(0,0,10,10); 
     readImage(imageData); 
    }; 
    imageObj.src = imageSource; 
    return imageObj; 
} 

function readImage(imageData) 
{ 
    console.log(); 
    console.log(imageData.data[0]); 
} 

var context = initContext('canvas','2d'); 
var imageObj = loadImage('images/color-test.png',context); 

Если вы хотите получить доступ к значению imageData вне loadImage(), у вас есть 2 основных варианта:

1. МАГАЗИНУ imageData в переменной, которая объявлена вне функции. В этом случае значение будет отменено до тех пор, пока не будет вызван ваш onload(), поэтому внешний код должен будет проверить его на разумность перед вызовом readImage(imageData).
2. Имейте внешний код зарегистрировать функцию обратного вызова, и ваш onload() вызовет эту функцию с помощью значения imageData.

Answer 2

Возможно также, что вы оцениваете часть прозрачного изображения. У меня была эта проблема при сканировании PNG.