加载和显示图像

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

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