載入和顯示影象

載入影象並將其放在畫布上

var image = new Image();  // see note on creating an image
image.src = "imageURL";
image.onload = function(){
    ctx.drawImage(this,0,0);
}

建立影象

有幾種方法可以建立影象

• new Image()
• document.createElement("img")
• <img src = 'imageUrl' id='myImage'> 作為 HTML 正文的一部分，並使用 document.getElementById('myImage') 進行檢索

影象是一個 HTMLImageElement

Image.src 屬性

影象 src 可以是任何有效的影象 URL 或編碼的 dataURL。有關影象格式和支援的更多資訊，請參閱本主題的備註。

• image.src = "http://my.domain.com/images/myImage.jpg"
• image.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" *

* dataURL 是包含黑色的 1 x 1 畫素 gif 影象

關於載入和錯誤的備註

設定 src 屬性後，影象將開始載入。載入是 syncriouse 但是在函式或程式碼退出/返回之前不會呼叫 onload 事件。

如果你從頁面獲取影象（例如 document.getElementById("myImage")）並且其 src 已設定，則可能已載入，也可能未載入。你可以使用 HTMLImageElement.complete 檢視影象的狀態，如果完成，將顯示 true。這並不意味著影象已經載入，這意味著它已經載入了

• 裝
• 有一個錯誤
• src 屬性尚未設定且等於空字串 ""

如果影象來自不可靠的源並且由於各種原因可能無法訪問，則會生成錯誤事件。發生這種情況時，影象將處於損壞狀態。如果你然後嘗試將其繪製到畫布上，則會丟擲以下錯誤

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

通過提供 image.onerror = myImgErrorHandler 事件，你可以採取適當的措施來防止錯誤。