Considere el siguiente código JavaScript (frágil):

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!'); };

Las preguntas)

¿El ancho y la altura de la imagen deben ser correctos inmediatamente?¿El lienzo debe funcionar de inmediato?Si elonload ¿se invoca la devolución de llamada (establecida después de que se modificó el src)?

Pruebas Experimentales
Creé unpágina de prueba simple con código similar En Safari mis primeras pruebas, ambas abriendo la página HTML localmente (file:/// url) y al cargarlo desde mi servidor, mostró que todo funcionaba: la altura y el ancho son correctos, el dibujo del lienzo funciona,y elonload también incendios.

En Firefox v3.6 (OS X), cargar la página después de iniciar el navegador muestra que la altura / anchura no es correcta inmediatamente después de la configuración,drawImage() falla (Losonload sin embargo, el controlador se dispara). Sin embargo, cargar la página nuevamente muestra que el ancho / alto es correcto inmediatamente después de la configuración, ydrawImage() trabajando. Parece que Firefox almacena en caché el contenido de la URL de datos como una imagen y lo tiene disponible de inmediato cuando se usa en la misma sesión.

En Chrome v8 (OS X) veo los mismos resultados que en Firefox: la imagen no está disponible de inmediato, pero tarda un tiempo en 'cargarse' asincrónicamente desde la URL de datos.

Además de la prueba experimental de qué navegadores funciona o no, lo anterior realmente me encantaría tener enlaces a especificaciones sobre cómo se supone que debe comportarse esto. Hasta ahora, mi Google-fu no ha estado a la altura.

Jugando a lo seguro
Para aquellos que no entienden por qué lo anterior puede ser peligroso, sepa que debe usar imágenes como esta para estar seguro:

// 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 = '...';