js获取图片信息(二)-----js获取img的height、width宽高值为0
首先,创建一个图片对象:
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的更多相关文章
- js判断图片上传时的文件大小,和宽高尺寸
今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...
- 如何获取设置display:none元素及子元素的宽高
由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...
- vue 动态获取div宽高有时候为0的情况
项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => { }) ...
- android获取mp4视频文件总时长和视频宽高<转>
android使用 MediaMetadataRetriever 获取视频文件的 总时长 和视频的分辨率. 根据该方式获取视频信息可以看出不仅仅可以获取时长和分辨率,还能获取到其他的一些视频信息,不错 ...
- js获取图片信息(一)-----获取图片的原始尺寸
如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- 转载:JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- Cordova app 检查更新 ----JS进行调用(二)
原文:Cordova app 检查更新 ----JS进行调用(二) 1.获取版本号 需要添加 插件 cordova plugin add https://github.com/whiteoctober ...
随机推荐
- hp 1810-24g switch reset
Specific steps to execute the factory default reset on the switch are: 1. Using a small, thin tool w ...
- UIViewController 专题
呵呵 轻轻巧巧 UIViewController self setNeedsStatusBarAppearanceUpdate 刷新状态栏 (内部会重新调用 prefersStatusBarHi ...
- HDU 5858Hard problem
Hard problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- Fragmen的onAttach方法
现在Android开发多使用一个Activity管理多个Fragment进行开发,不免需要两者相互传递数据,一般是给Fragment添加回调接口,让Activity继承并实现. 回调接口一般都写在Fr ...
- BitmapFactory.decodeStream()获取bitmap返回null
正常的图片缩放代码如: ByteArrayOutputStream baos = new ByteArrayOutputStream(); arg1.compress(Bitmap.CompressF ...
- Unix域套接字(Unix Domain Socket)介绍【转】
本文转载自:http://blog.csdn.net/roland_sun/article/details/50266565 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux系统中, ...
- Protected vs protected internal (Again) in c#
http://stackoverflow.com/questions/22940317/protected-vs-protected-internal-again-in-c-sharp protect ...
- P3959 宝藏 状压dp
之前写了一份此题关于模拟退火的方法,现在来补充一下状压dp的方法. 其实直接在dfs中状压比较好想,而且实现也很简单,但是网上有人说这种方法是错的...并不知道哪错了,但是就不写了,找了一个正解. 正 ...
- Word中公式和文字混排对齐的问题
全选-字体-字符间距-位置-标准-确定 段落-中文版式-文本对齐方式-居中-确定
- 湖南集训Day1
难度 不断网:☆☆☆ 断网:☆☆☆☆ /* 卡特兰数取模 由于数据范围小,直接做. 考试时断网.忘记卡特兰数公式,推错了只有5分. 数学公式要记别每次都现用现搜!!! */ #include<i ...