Question

如果我将图片的引用传递给HTML drawImage的{{1}} API，但图片仍在加载，那么会发生什么？会得到异常，或者API会继续部分数据，或者API会阻塞，直到图像被加载？

Answer 1

canvas spec表示即使加载量为99％，也不会绘制任何内容。它不会引发错误。

所以，如果你这样做：

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

这就是大多数人做类似的事情的原因：

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

确保绘制图像。

Answer 2

The spec说没有任何事情要做。

如果第一个参数不是img，canvas或video元素，则抛出TYPE_MISMATCH_ERR异常。如果图像没有图像数据，则抛出INVALID_STATE_ERR异常。如果其中一个源矩形尺寸为零，则抛出INDEX_SIZE_ERR异常。 如果图像尚未完全解码，则不会绘制任何内容。

我试过它只是为了它的地狱。你可以see the results here.

我基本上使用PHP来减慢图像加载速度。

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>

已经确定，如你所见，没有任何内容。

Answer 3

我曾经偶然发现了这件事;问题是我没有看到任何绘制因为我没有使用img.onload。

您可以确认：http://jsfiddle.net/pimvdb/eGjak/100/。它很可能最初不会显示，但会因为缓存而重新加载。

最佳做法是始终使用onload。

Answer 4

API将不会在画布上绘制任何内容。除非您使用循环重绘画布并且其中包含图像，否则用户将永远不会看到图像。通常的做法是使用onload with canvas for canvas - 所有支持canvas支持img.onload的浏览器。在循环情况下，您可以随时添加图像，但知道在下载之前它们不会被看到。

如果我尝试使用drawImage（）来处理尚未完全加载的图像会发生什么？

4 个答案: