首先,创建一个图片对象:

var oImg= new Image();
oImg.src = "apple.jpg";

然后我们打印一下图片的信息:

console.log(oImg);
console.log(oImg.src);
console.log(oImg.height);
console.log(oImg.naturalHeight);
console.log(oImg.width);
console.log(oImg.naturalWidth);

在某些电脑上的谷歌浏览器和IE11浏览器上,以上代码工作正常。但是在某些电脑上会报出和火狐在第一次打开时却报出宽高值均为0。如果按F5刷新页面,又能正确获取宽高值了。按 Ctrl+F5 强制刷新(忽略缓存)的话,仍能复现这个问题。

这是因为火狐对于JS异步运行非常快。当载入image.src = "apple.jpg";时,火狐已经开始运行 var height = image.height;了。而且这与DOM无关,完全是javascript浏览器的问题。

如果你的图片不是通过是 js 创建的,在页面本来就存在的,也会出现这种情况的。我个人就是这种情况,然后查出问题的。

使用 oImg.onload 可以避免这个问题。

oImg.onload = function () {
console.log(oImg);
console.log(oImg.src);
console.log(oImg.height);
console.log(oImg.naturalHeight);
console.log(oImg.width);
console.log(oImg.naturalWidth);
}

所以当你需要获取图片信息时,最好是用 oImg.onload 来保证结果的正确。

综合考虑,如不考虑浏览器兼容性问题,获取图片原始尺寸可以使用HTML5 新属性 naturalWidth/naturalHeight;如要兼容的话,直接使用 .width,.height 就可以了。

参考:javascript使用image.height和image.width获取图片宽高值为0,获取失败

js获取图片信息(二)-----js获取img的height、width宽高值为0的更多相关文章

  1. js判断图片上传时的文件大小,和宽高尺寸

    今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...

  2. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...

  3. vue 动态获取div宽高有时候为0的情况

    项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => {    }) ...

  4. android获取mp4视频文件总时长和视频宽高<转>

    android使用 MediaMetadataRetriever 获取视频文件的 总时长 和视频的分辨率. 根据该方式获取视频信息可以看出不仅仅可以获取时长和分辨率,还能获取到其他的一些视频信息,不错 ...

  5. js获取图片信息(一)-----获取图片的原始尺寸

    如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...

  6. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  7. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  8. 转载:JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  9. Cordova app 检查更新 ----JS进行调用(二)

    原文:Cordova app 检查更新 ----JS进行调用(二) 1.获取版本号 需要添加 插件 cordova plugin add https://github.com/whiteoctober ...

随机推荐

  1. hp 1810-24g switch reset

    Specific steps to execute the factory default reset on the switch are: 1. Using a small, thin tool w ...

  2. UIViewController 专题

    呵呵 轻轻巧巧    UIViewController self setNeedsStatusBarAppearanceUpdate 刷新状态栏 (内部会重新调用 prefersStatusBarHi ...

  3. HDU 5858Hard problem

    Hard problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  4. Fragmen的onAttach方法

    现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写在Fr ...

  5. BitmapFactory.decodeStream()获取bitmap返回null

    正常的图片缩放代码如: ByteArrayOutputStream baos = new ByteArrayOutputStream(); arg1.compress(Bitmap.CompressF ...

  6. Unix域套接字(Unix Domain Socket)介绍【转】

    本文转载自:http://blog.csdn.net/roland_sun/article/details/50266565 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux系统中, ...

  7. Protected vs protected internal (Again) in c#

    http://stackoverflow.com/questions/22940317/protected-vs-protected-internal-again-in-c-sharp protect ...

  8. P3959 宝藏 状压dp

    之前写了一份此题关于模拟退火的方法,现在来补充一下状压dp的方法. 其实直接在dfs中状压比较好想,而且实现也很简单,但是网上有人说这种方法是错的...并不知道哪错了,但是就不写了,找了一个正解. 正 ...

  9. Word中公式和文字混排对齐的问题

    全选-字体-字符间距-位置-标准-确定 段落-中文版式-文本对齐方式-居中-确定

  10. 湖南集训Day1

    难度 不断网:☆☆☆ 断网:☆☆☆☆ /* 卡特兰数取模 由于数据范围小,直接做. 考试时断网.忘记卡特兰数公式,推错了只有5分. 数学公式要记别每次都现用现搜!!! */ #include<i ...