html5 canvas 图像预览,html5-canvas 加载并显示图像

示例

加载图像并将其放置在画布上

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事件，您可以采取适当的措施来防止错误。