圖像預加載在畫布中

Question

我正在使用drawImage函數在畫布上繪製圖像。這是林如何設置圖像的src屬性：

var img = new Image(); // Create new Image object
img.src = 'test.php?filename=myfile.jpg'

然後

oCanvas.width = 600; oCanvas.height = 400; oContext.drawImage(img, 0, 0, 600, 400);

的問題是，如果不設置src然後我得到FOLL錯誤：」 未捕獲的異常：[異常...]組件返回失敗代碼：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]「。我知道我得到這個錯誤因爲圖像沒有完成加載我在drawImage函數調用之前添加一個提醒讓圖像完成加載，它似乎工作，但這是一個痛苦的脖子，我該如何檢查是否圖像已完成加載？順便說一句，我必須通過調用一個PHP文件來設置src屬性。

Answer 1

定義此之前您設置圖像的src屬性。

// Create new Image object 
var img = new Image(); 

img.onload = function() { 
    // add it to the canvas 
    oCanvas.width = 600; oCanvas.height = 400; 
    oContext.drawImage(img, 0, 0, 600, 400); 
}; 

img.src = 'test.php?filename=myfile.jpg'; 

（它需要先定義，否則IE7不會觸發它）。

此外，如果您想對該錯誤執行某些操作，請使用JavaScript的try/catch。

try { 
    oCanvas.width = 600; oCanvas.height = 400; 
    oContext.drawImage(img, 0, 0, 600, 400); 
} catch (exception) { 
    alert('something went wrong!'); 
};