js获取图片原始尺寸

如何获取图片的原始尺寸大小?

  如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢?

#oImg{
    width: 100px;
    height: 100px;
}
<img src="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)
        }
    }

此时为什么要加 onload 的原因是,图片可能没加载完成,导致图片的 width 、height 无法获取到。

还有下面一种情况:图片外面有个盒子,且盒子display:none;

.imgbox{
        width: 100px;
        height: 100px;
        display: none;
}

<div class="imgbox">
    <img src="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 了。

时间: 2024-12-19 15:46:51

js获取图片原始尺寸的相关文章

Js获取图片原始宽高

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_

获取图片原始尺寸

前提:图片设置了别的width值 1.新建一个Image()对象,然后把图片的src赋给该对象 function getNaturalWidth(img) { var image = new Image() image.src = img.src var naturalWidth = image.width return naturalWidth } 2.HTML5提供了新属性,naturalWidth/naturalHeight可以直接获取图片的原始宽高. function getImgNat

js获取图片原始大小

摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px;height:25px;"> 这样在浏览器中显示的大小就是25px.那么我们如何获取图片的真实大小呢?,下面的代码就实现了这个功能 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=&quo

如何解决谷歌浏览器下jquery无法获取图片的尺寸

代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因为图片没有加载完成. 修改方法如下: $(document).ready(function(){ $img.load(function(){ var img_h=$img.height(); var img_w=$img.width(); }

JS获取图片的缩略图,并且动态的加载多张图片

找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js获取缩略图</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <st

谷歌浏览器下jquery无法获取图片的尺寸解决方案

谷歌浏览器下jquery无法获取图片的尺寸解决方案: 本章节介绍一下在谷歌浏览器下利用jquery无法获取图片尺寸的现象,而在IE和火狐浏览器下能够正常获得,当然也不是任何时候都无法获取图片尺寸,下面就来介绍一下如何解决此问题. 代码如下: $(document).ready(function(){   var img_h=$img.height();    var img_w=$img.width();  }) 以上代码在IE和火狐中没有问题,但是在谷歌中可能会出现问题,之所以没货的尺寸就是因

js获取图片是否加载完毕

Snandy If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls. JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <

积跬步,聚小流------java获取图片的尺寸

在一篇文章中获取到通过例如以下两种方式进行获取: 1.使用ImageReader进行获取: 2.使用BufferedImage进行获取: 而且经过验证ImageReader进行操作的耗时远远低于BufferedImage操作的耗时,详情可查看链接查看原文 然后依据应用我自己在项目中略做修改,在这里记录下: <span style="font-size:14px;">package com.jzba.utils; import java.awt.image.BufferedI

js 获取图片url的Blob值并预览

1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { if(cb) cb(this