Synchronously Create Image Object from DataURI using JavaScript

Question

does anyone know if it's possible to synchronously create an image object from a data uri using JavaScript? It is possible to create an image object from a data URI asynchronously like this:

            imageObj = new Image();
            imageObj.onload = function() {
                callback(imageObj);
            };
            imageObj.src = dataURI;

You might think that this would work:

            imageObj = new Image();
            imageObj.src = dataURI;
            callback(imageObj);

But if I remember correctly, this fails in some browsers.

Ideas?

what happens in the first example? Should work as the onload function MUST be defined before you change the source — mplungjan, Nov 03 '13 at 06:43

score 0 · Answer 1 · answered Nov 03 '13 at 06:35

0

I think you can use complete attribute of Image object.

http://www.w3schools.com/jsref/prop_img_complete.asp

Before calling callback function, in a loop, you can continuously check whether complete is true. Once its true, then it is loaded.

answered Nov 03 '13 at 06:35

tcak

2,142
1
16
23

I was hoping to find a way to instantly change a data URI into an image object. Using a polling technique to determine if the image has loaded, in my opinion, is worse than hooking into the onload event. – Eric Rowell Nov 03 '13 at 07:14

Synchronously Create Image Object from DataURI using JavaScript

1 Answers1