如果我尝试对尚未完全加载的图像使用 drawImage() 会发生什么？答案

【问题标题】：What would happen if I try use drawImage() for an image which not yet fully loaded?如果我尝试对尚未完全加载的图像使用 drawImage() 会发生什么？
【发布时间】：2011-11-13 05:20:48
【问题描述】：

如果我将图像的引用传递给 HTML canvas 的 drawImage API，但图像仍在加载，那么会发生什么？会出现异常，还是 API 会继续处理部分数据，或者 API 会阻塞直到图像加载完毕？

【问题讨论】：

标签： javascript image canvas html5-canvas

【解决方案1】：

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>

正如你所见，没有任何东西被绘制出来。

【讨论】：

这个答案花了我 20 分钟 :)

【解决方案2】：

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

以确保图像将被绘制。

【讨论】：

感谢您的解释和解决方案。

【解决方案3】：

API 不会在画布上绘制任何内容。除非您使用循环来重绘包含图像的画布，否则用户将永远看不到图像。通常的做法是将 onload 与画布的图像一起使用——所有支持画布的浏览器都支持 img.onload。在循环的情况下，您可以通过动态添加图像而侥幸逃脱，但要知道在下载它们之前不会看到它们。

【讨论】：

【解决方案4】：

我曾经偶然发现过这个；问题是我没有看到任何绘制的东西，因为我没有使用img.onload。

您可以确认：http://jsfiddle.net/pimvdb/eGjak/100/。它很可能一开始不会显示，但由于缓存，它会在重新加载后显示。

最佳做法是始终使用onload。

【讨论】：