Javascript: Correct way to load image to canvas for getImageData?

Question

I wrote a simple libraryless rotozoomer for html5-canvas, and I'm wondering what is the correct way to let image load to canvas before using 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()
{ ...

The code works with the alert, because it causes the required "break" for loading the image. I wish not to use JQuery nor Ajax.

Here I use imageObj.onload directly at drawing on canvas. Probably not the right way? Thanks in advance for the feedback and the solution.

Obviously I'm not a js expert, but do you want to consider using `toDataURL()` to get the base64 representation? — windweller, Feb 23 '14 at 18:03
As explained by this post: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript — windweller, Feb 23 '14 at 18:03

score 0 · Accepted Answer · answered Feb 23 '14 at 18:02

0

You should put

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);

inside imageObj.onload function

answered Feb 23 '14 at 18:02

Vlad Nikitin

1,929
15
17

If this answer works for you, it's customary to mark the answer as accepted by clicking the checkmark. – Ben Rudolph Feb 23 '14 at 21:27

Javascript: Correct way to load image to canvas for getImageData?

1 Answers1