如果我嘗試將drawImage（）用於尚未完全加載的圖像，會發生什麼情況？

Question

如果我將參考圖像傳遞給drawImage API的HTML canvas，但圖像仍在加載，那麼會發生什麼？會得到一個異常，或者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

我曾經偶然發現過這個;問題是我沒有看到任何東西，因爲我沒有使用img.onload。

您可以確認：http://jsfiddle.net/pimvdb/eGjak/100/。它最初可能不會顯示，但會因緩存而重新加載。

最佳做法是始終使用onload。

Answer 3

該API不會在畫布上繪製任何內容。除非你使用一個循環來重畫帶有包含在其上的圖像的畫布，否則用戶將永遠看不到圖像。通常的做法是使用canvas的圖像加載 - 所有支持canvas支持img.onload的瀏覽器。在一個循環的情況下，你可能會逃避添加圖像的動態，但知道，直到他們下載他們沒有看到。

Answer 4

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> 

由於已經建立，並且你可以看到，什麼也不繪製。