示例

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

var?image?=?new?Image();??// 請(qǐng)參閱有關(guān)創(chuàng)建圖像的注釋

image.src?=?"imageURL";

image.onload?=?function(){

ctx.drawImage(this,0,0);

}

創(chuàng)建圖像

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

document.createElement("img")

?作為HTML正文的一部分，并通過 document.getElementById('myImage')

該圖像是 HTMLImageElement

Image.src屬性

該圖像src可以是任何有效的圖像URL或編碼的dataURL。有關(guān)圖像格式和支持的更多信息，請(qǐng)參見本主題的備注。image.src = "http://my.domain.com/images/myImage.jpg"

image.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" *

* dataURL是包含黑色的1乘1像素gif圖像

關(guān)于加載和錯(cuò)誤的說明

設(shè)置其src屬性后，圖像將開始加載。加載是同步的，但是onload直到函數(shù)或代碼退出/返回后才調(diào)用該事件。

如果您從頁面獲取圖像(例如document.getElementById("myImage"))，并且圖像src已設(shè)置，則可能已加載或可能未加載。您可以檢查與圖像的狀態(tài)HTMLImageElement.complete，這將是true，如果完成。這并不意味著圖像已經(jīng)加載，這意味著它已經(jīng)已加載

有一個(gè)錯(cuò)誤

尚未設(shè)置src屬性，該屬性等于空字符串 ""

如果圖像來自不可靠的來源，并且由于各種原因可能無法訪問，則它將生成錯(cuò)誤事件。發(fā)生這種情況時(shí)，圖像將處于損壞狀態(tài)。如果隨后嘗試將其繪制到畫布上，則會(huì)引發(fā)以下錯(cuò)誤

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

通過提供image.onerror = myImgErrorHandler事件，您可以采取適當(dāng)?shù)拇胧﹣矸乐瑰e(cuò)誤。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。