Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should setting an image src to data URL be available immediately?

Consider the following (fragile) JavaScript code:

var img = new Image; img.src = "data:image/png;base64,..."; // Assume valid data  // Danger(?) Attempting to use image immediately after setting src console.log( img.width, img.height ); someCanvasContext.drawImage( img, 0, 0 );  // Danger(?) Setting onload after setting src img.onload = function(){ console.log('I ran!'); }; 

The Question(s)

  • Should the image width and height be correct immediately?
  • Should the canvas draw work immediately?
  • Should the onload callback (set after the src was changed) be invoked?

Experimental Tests
I created a simple test page with similar code. In Safari my first tests, both by opening the HTML page locally (file:/// url) and loading it from my server, showed everything working: the height and width is correct, the canvas draw works, and the onload also fires.

In Firefox v3.6 (OS X), loading the page after launching the browser shows that the height/width is not correct immediately after setting, drawImage() fails. (The onload handler does fire, however.) Loading the page again, however, shows the width/height being correct immediately after setting, and drawImage() working. It would appear that Firefox caches the contents of the data URL as an image and has it available immediately when used in the same session.

In Chrome v8 (OS X) I see the same results as in Firefox: the image is not available immediately, but takes some time to asynchronously 'load' from the data URL.

In addition to experimental proof of what browsers the above does or does not work, I'd really love links to specs on how this is supposed to behave. So far my Google-fu has not been up to the task.

Playing It Safe
For those who don't understand why the above might be dangerous, know that you should use images like this to be safe:

// First create/find the image var img = new Image;  // Then, set the onload handler img.onload = function(){   // Use the for-sure-loaded img here };  // THEN, set the src img.src = '...'; 
like image 863
Phrogz Avatar asked Jan 23 '11 21:01

Phrogz


People also ask

How do I give an image the SRC URL?

There are two ways to specify the URL in the src attribute: 1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

What is data URI of image?

Introduction. A Data URL is a URI scheme that provides a way to inline data in an HTML document. Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img tag to make the browser reference it from the network: <img src="image.png" />

How do I change the src of an image in HTML?

To change the source or src of an image, you need to add an id or class to the image tag. You can get the image element using the name of the id or class , and you can change the source or src of the image using the src property.


1 Answers

As no one has yet found any specifications about how this is supposed to behave, we will have to be satisfied with how it does behave. Following are the results of my tests.

             | is image data usable right  | does onload callback set after src             |     after setting src?      |   is changed still get invoked? ------------+-----------------------------+------------------------------------- Safari  5   |             yes             |                  yes                 ------------+-----------------------------+------------------------------------- Chrome  8   | **no** (1st page load), but |                  yes                 FireFox 3.6 |  yes thereafter (cached)    |                                      ------------+-----------------------------+------------------------------------- IE8         |    yes (32kB data limit)    |                  yes          ------------+-----------------------------+------------------------------------- IE9b        |             yes             |                 **no**               ------------+-----------------------------+------------------------------------- 

In summary:

  • You cannot assume that the image data will be available right after setting a data-uri; you must wait for the onload event.
  • Due to IE9, you cannot set the onload handler after setting the src and expect it to be invoked.
  • The recommendations in "Playing it Safe" (from the question above) are the only way to ensure correct behavior.

If anyone can find specs discussing this, I will happily accept their answer instead.

like image 122
Phrogz Avatar answered Oct 05 '22 16:10

Phrogz