示例

加載圖像并將其放置在畫布上

var?image?=?new?Image();??// 請參閱有關創建圖像的注釋

image.src?=?"imageURL";

image.onload?=?function(){

ctx.drawImage(this,0,0);

}

創建圖像

有幾種創建圖像的方法new Image()

document.createElement("img")

?作為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乘1像素gif圖像

關于加載和錯誤的說明

設置其src屬性后，圖像將開始加載。加載是同步的，但是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事件，您可以采取適當的措施來防止錯誤。

總結

以上是生活随笔為你收集整理的html5 canvas 图像预览,html5-canvas 加载并显示图像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。