HTML DOM Image 对象 「爱情、让人受尽委屈。」 2022-04-17 06:24 174阅读 0赞 **目录** Image 对象 Image 对象的属性 标准属性 Image 对象事件 编码示例 常用操作 事件操作 -------------------- # Image 对象 # Image 对象代表嵌入的图像,<img> 标签每出现一次,一个 Image 对象就会被创建。 需要理解的是:为了可以方便的在 JavaScript 中来操作 <[audio> ][audio]和 [<video>][video] 标签元素,比如控制播放,暂停、音量、快进等操作,HTML 5 DOM 为它们提供 DOM 对象,提供了更多的方法、属性和事件。同理为了在 JavaScript 中更好的操作 <img> 标签,同样为它提供了 DOM 对象 Image。 注意:创建 Image 对象举例:var img = new Image(); 然后 img.src="xxx";设置图片地址。不能直接使用 var img = new Image("src");这是错误的。 ## Image 对象的属性 ## <table> <tbody> <tr> <th>属性</th> <th>描述</th> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_align.asp" rel="nofollow">align</a></td> <td>设置或返回与内联内容的对齐方式。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_alt.asp" rel="nofollow">alt</a></td> <td>设置或返回无法显示图像时的替代文本。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_border.asp" rel="nofollow">border</a></td> <td>设置或返回图像周围的边框。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_complete.asp" rel="nofollow">complete</a></td> <td>返回浏览器是否已完成对图像的加载。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_height.asp" rel="nofollow">height</a></td> <td>设置或返回图像的高度。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_hspace.asp" rel="nofollow">hspace</a></td> <td>设置或返回图像左侧和右侧的空白。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_id.asp" rel="nofollow">id</a></td> <td>设置或返回图像的 id。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_ismap.asp" rel="nofollow">isMap</a></td> <td>返回图像是否是服务器端的图像映射。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_longdesc.asp" rel="nofollow">longDesc</a></td> <td>设置或返回指向包含图像描述的文档的 URL。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_lowsrc.asp" rel="nofollow">lowsrc</a></td> <td>设置或返回指向图像的低分辨率版本的 URL。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_name.asp" rel="nofollow">name</a></td> <td>设置或返回图像的名称。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_src.asp" rel="nofollow">src</a></td> <td>设置或返回图像的 URL。<span style="color:#f33b45;">即使 img 标签中使用的相对路径,Image 对象的 src 属性返回的也是绝对路径。</span></td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_usemap.asp" rel="nofollow">useMap</a></td> <td>设置或返回客户端图像映射的 usemap 属性的值。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_vspace.asp" rel="nofollow">vspace</a></td> <td>设置或返回图像的顶部和底部的空白。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_img_width.asp" rel="nofollow">width</a></td> <td>设置或返回图像的宽度。</td> </tr> </tbody> </table> ## 标准属性 ## <table> <tbody> <tr> <th>属性</th> <th>描述</th> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_classname.asp" rel="nofollow">className</a></td> <td>设置或返回元素的 class 属性。</td> </tr> <tr> <td><a href="http://www.w3school.com.cn/jsref/prop_title.asp" rel="nofollow">title</a></td> <td>设置或返回元素的 title。</td> </tr> </tbody> </table> ## Image 对象事件 ## <table> <tbody> <tr> <th>事件</th> <th>描述</th> <th>W3C</th> </tr> <tr> <td><a href="http://www.runoob.com/jsref/event-img-onabort.html" rel="nofollow">onabort</a></td> <td>当用户放弃图像的装载时调用的事件句柄。</td> <td>Yes</td> </tr> <tr> <td><a href="http://www.runoob.com/jsref/event-img-onerror.html" rel="nofollow">onerror</a></td> <td>在装载图像的过程中发生错误时调用的事件句柄。</td> <td>Yes</td> </tr> <tr> <td><a href="http://www.runoob.com/jsref/event-img-onload.html" rel="nofollow">onload</a></td> <td>当图像装载完毕时调用的事件句柄。</td> <td>Yes</td> </tr> </tbody> </table> # 编码示例 # ## 常用操作 ## <!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> ![20181114094305120.gif][] 单纯就获取和改变图片宽高,或者改变图片地址而言,即使不使用 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> ![20181114101455563.gif][] ## 事件操作 ## <!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> ![20181114123220512.png][] [audio]: http://www.w3school.com.cn/tags/tag_audio.asp [video]: http://www.w3school.com.cn/tags/tag_video.asp [20181114094305120.gif]: /images/20220417/d111201de06e42da8248cbbfbef558bb.png [20181114101455563.gif]: /images/20220417/735d2530008c42a6a5dc1150297f6f3a.png [20181114123220512.png]: /images/20220417/83464d2e2bd84c0fa888929e884cfcc6.png
还没有评论,来说两句吧...