Image 对象

Image 对象代表嵌入的图像，<img> 标签每出现一次，一个 Image 对象就会被创建。

需要理解的是：为了可以方便的在 JavaScript 中来操作 <audio> 和 <video> 标签元素，比如控制播放，暂停、音量、快进等操作，HTML 5 DOM 为它们提供 DOM 对象，提供了更多的方法、属性和事件。同理为了在 JavaScript 中更好的操作 <img> 标签，同样为它提供了 DOM 对象 Image。

Image 对象的属性

属性	描述
align	设置或返回与内联内容的对齐方式。
alt	设置或返回无法显示图像时的替代文本。
border	设置或返回图像周围的边框。
complete	返回浏览器是否已完成对图像的加载。
height	设置或返回图像的高度。
hspace	设置或返回图像左侧和右侧的空白。
id	设置或返回图像的 id。
isMap	返回图像是否是服务器端的图像映射。
longDesc	设置或返回指向包含图像描述的文档的 URL。
lowsrc	设置或返回指向图像的低分辨率版本的 URL。
name	设置或返回图像的名称。
src	设置或返回图像的 URL。
useMap	设置或返回客户端图像映射的 usemap 属性的值。
vspace	设置或返回图像的顶部和底部的空白。
width	设置或返回图像的宽度。

标准属性

属性	描述
className	设置或返回元素的 class 属性。
title	设置或返回元素的 title。

Image 对象事件

事件	描述	W3C
onabort	当用户放弃图像的装载时调用的事件句柄。	Yes
onerror	在装载图像的过程中发生错误时调用的事件句柄。	Yes
onload	当图像装载完毕时调用的事件句柄。	Yes

编码示例

常用操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Image 对象</title>
    <style type="text/css">
        .divImg {
            width: 200px;
            height: 200px;
            border: 1px solid saddlebrown;
            float: left;
            margin-left: 20px;
        }

        .divImg img {
            min-height: 100%;
            min-width: 100%;
        }
    </style>

    <script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function () {
            /**左侧图片按钮*/
            $("#but1").click(function () {
                /**每一个 <img> 标签都表示一个 Image DOM 对象*/
                var imgDom = document.getElementById("img1");
                imgDom.border = 2;//设置图片边框 2 像素，不要带单位

                var width = imgDom.width;//获取图片显示的宽度，不是实际的宽度
                var height = imgDom.height;//获取图片显示的高度，不是实际的高度
                $("#info1").text("高:" + height + " px,宽:" + width + " px");

                /**设置图片的 src 属性值，动态改变图像*/
                imgDom.src = "https://res.wx.qq.com/mpres/htmledition/images/mp_qrcode3a7b38.gif";
            });
        });
    </script>
</head>
<body>

<div class="divImg">
    <img src="https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg" id="img1">
    <button id="but1">校验 API</button>
    <p id="info1"></p>
</div>
</body>
</html>

单纯就获取和改变图片宽高，或者改变图片地址而言，即使不使用 Image DOM 对象，而使用纯 JS 或者 JQuery 也可以做到，但是 Image 对象还有其它用途，比如 Canvas 画布绘制图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Image 对象</title>
    <style type="text/css">
        .divImg {
            width: 200px;
            height: 200px;
            border: 1px solid saddlebrown;
            float: left;
            margin-left: 20px;
        }

        .divImg img {
            min-height: 100%;
            min-width: 100%;
        }
    </style>

    <script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function () {
            /**左侧图片按钮*/
            $("#but1").click(function () {
                /**一个 <img> 标签就是一个 Image DOM 对象*/
                var imageDom = new Image();
                imageDom.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";

                /**将图片添加到 div 内，这里 imageDon DOM 转为 JQuery 对象，使用 JQuery 进行操作*/
                $(".divImg:first").append($(imageDom));
            });

            /**右侧图片按钮*/
            $("#but2").click(function () {
                /**一个 <img> 标签就是一个 Image DOM 对象*/
                var imageDom = new Image();
                imageDom.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";

                /**使用画布绘制图像*/
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                /**
                 * 在画布上定位图像，并规定图像的宽度和高度
                 * context.drawImage(img,x,y,width,height);
                 */
                ctx.drawImage(imageDom, 0, 0, 200, 200);
            });
        });
    </script>
</head>
<body>
<div class="divImg">
    <button id="but1">生成图片</button>
</div>

<div class="divImg">
    <button id="but2">生成图片</button>
    <canvas width="200" height="200" id="myCanvas">您的浏览器不支持 Canvas</canvas>
</div>
</body>
</html>

事件操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>onload 事件</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        /**供页面图片加载完成时调用*/
        var imgLoad = function (imgName) {
            console.log("页面图片加载完成..." + imgName);
        };

        $(function () {
            /**这张图片地址是故意写错，无法访问的，所以加载时会出错
             * 这里为它绑定 onerror 事件，图片加载发生错误时触发*/
            let img2 = document.getElementById("img2");
            img2.onerror = function () {
                console.log("图片加载错误：" + img2.src)
            };

            /**动态创建一张图片，并设置图片地址*/
            let imgDom = new Image();
            imgDom.src = "https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg";

            /**为Image对象绑定onload 事件，图片加载完成时触发*/
            imgDom.onload = function () {
                console.log("动态加载完成：" + imgDom.src);
            };
        });
    </script>
</head>
<body>
<img src="https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg" onload="imgLoad('正常图片1')" id="img1">
<img src="https://axxxxx.jpg" id="img2">
</body>
</html>

HTML DOM Image 对象