首页 > 代码库 > js获取图片原始尺寸
js获取图片原始尺寸
如何获取图片的原始尺寸大小?
如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢?
#oImg{
width: 100px;
height: 100px;
}
<img src=http://www.mamicode.com/"images/test.jpg" id="oImg" alt="">
HTML5提供了一个新属性 naturalWidth / naturalHeight 可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。
w = document.getElementByTagName("img").naturalWidth; h = document.getElementsByTagName("img").naturalHeight; console.log(w + ‘ ‘ + h);
打印出来的结果与原始尺寸相符。但有个前提是,必须在图片完全下载到客户端浏览器才能判断。
如果是不支持的版本浏览器,那可以用传统方法判断,如下:
var oImg = document.getElementById("oImg"), w,h; if (oImg.naturalWidth) { // HTML5 browsers w = oImg.naturalWidth; h = oImg.naturalHeight; } else { // IE 6/7/8 var nImg = new Image(); nImg.src = oImg.src; nImg.onload = function () { w = nImg.width; h = nImg.height;
console.log(w + " " + h) } }
此时为什么要加 onl oad 的原因是,图片可能没加载完成,导致图片的 width 、height 无法获取到。
还有下面一种情况:图片外面有个盒子,且盒子display:none;
.imgbox{ width: 100px; height: 100px; display: none; } <div class="imgbox"> <img src=http://www.mamicode.com/"images/test.jpg" id="oImg" alt=""> </div>
嫌创建 new Image() 麻烦,就想到另外一种方法。
var oImg = document.getElementById("oImg"), w,h; if (oImg.naturalWidth) { // HTML5 browsers w = oImg.naturalWidth; h = oImg.naturalHeight; } else { // IE 6/7/8 w = oImg.width; h = oImg.height; } console.log(w + " " + h)
但这种方法,在ie8 下是获取不到 img width / height 的。此时,我们要对 imgbox 做下处理。
.imgbox{ width: 0; overflow: hidden; }
现在就可以兼容 ie8 了。
js获取图片原始尺寸
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。