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>