JavaScript: правильный способ загрузки изображения на холст для getImageData?

Question

Я написал простой безбиблиотечный ротозумер для html5-canvas, и мне интересно, как правильно загрузить изображение на холст перед использованием getImageData?

var hc = document.getElementById("hiddenCanvas"); var hctx = hc.getContext("2d"); // Hidden canvas for imageload (hctx)
var imageObj = new Image(); imageObj.onload = function() { hctx.drawImage(this, 0, 0); }; imageObj.src = 'img/8.jpg';

alert("Click to start");
// This alert needs to be replaced with "hold-the-script-until-image-is-fully-loaded" or the image_data will be nothing but black.

var image_data = hctx.getImageData(0,0,1000,1000);
var rgba_byte_array = image_data.data; // image_data.data.length = 4000000
var loop = setInterval(loop,1000/30);

function loop()
{ ...

Код работает с предупреждением, поскольку вызывает необходимый "разрыв" при загрузке изображения. Я не хочу использовать ни JQuery, ни Ajax.

Здесь я использую imageObj.onload прямо при рисовании на холсте. Наверное, не правильный путь? Заранее спасибо за отзыв и решение.

Answer 1

Вы должны положить

var image_data = hctx.getImageData(0,0,1000,1000);
var rgba_byte_array = image_data.data; // image_data.data.length = 4000000
var loop = setInterval(loop,1000/30);

внутри imageObj.onload функция