¿Qué pasaría si intento usar drawimage () para una imagen que aún no está completamente cargada?

Question

Si paso la referencia a una imagen a drawImage API de HTML canvas, pero la imagen todavía se está cargando, ¿qué pasaría? ¿Obtendrá una excepción, o la API seguirá adelante con los datos parciales, o la API bloqueará hasta que se cargue la imagen?

Answer 1

los especificación de lienzo dicta que no se dibujará nada, incluso si está cargado del 99%. No arroja un error.

Entonces, si lo haces:

var img = new Image();
img.src = 'http://placekitten.com/300/300';
// Might occur before the image is done loading (bad!)
ctx.drawImage(img, 0, 0);

Es por eso que la mayoría de las personas hacen algo similar a:

var img = new Image();
img.onload = function() {
  // Will occur only once the image is done loading
  ctx.drawImage(img, 0, 0);
}
img.src = 'http://placekitten.com/300/300';

Para asegurarse de que la imagen se dibuje.

Answer 2

La especificación dice que no se debe dibujar nada.

Si el primer argumento no es un elemento IMG, Canvas o Video, lanza una excepción type_mismatch_err. Si la imagen no tiene datos de imagen, lanza una excepción inválida_state_err. Si la de las dimensiones del rectángulo de origen es cero, lanza una excepción index_size_err. Si la imagen aún no está completamente decodificada, entonces no se dibuja nada.

Lo probé solo por el infierno. Puedes Vea los resultados aquí.

Básicamente usé PHP para ralentizar la carga de la imagen.

SlowImage.php

<?php
    sleep(3);

    header('Content-type: image/png');
    echo file_get_contents('stackoverflow-logo-300.png');
?>

index.html

<canvas id="canvas" width="512" height="512">

<script>
    var img = new Image();
    img.onload = function() {
        alert("image loaded");
    };
    img.src = "slowimage.php";

    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.drawImage(img, 0, 0);
</script>

Como se ha establecido, y como puede ver, no se dibuja nada.

Answer 3

Una vez me topé con esto; El problema era que no vi nada dibujado porque no estaba usando img.onload.

Puedes confirmarlo: http://jsfiddle.net/pimvdb/egjak/100/. Probablemente no se mostrará al principio, pero después de la recarga debido al caché.

La mejor práctica es usar onload en todo momento.

Answer 4

La API no atraerá nada sobre el lienzo. A menos que esté utilizando un bucle que vuelva a dibujar el lienzo con la imagen incluida en ella, el usuario nunca verá la imagen. La práctica normal es usar Onload con imágenes para lienzo, todos los navegadores que admiten el lienzo admiten img.onload. En una situación de bucle, es posible que pueda salirse con la suya agregando imágenes sobre la marcha, pero sepa que hasta que se descarguen no se ven.