页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下
复制代码 代码如下:
<img src="/UploadFiles/2021-04-02/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"><script>
var img = document.getElementsByTagName('img')[0]
var width = getWH(img, 'width') // 690
</script>
这里使用的getWH方法是之前文章里提到的。这时候获取的宽度和图片的原始尺寸是一样的。
如果给img加上了width属性,这种方式就不行了,比如图片实际宽度是690,设置了width为400,这时按上面的方式获取则返回400
复制代码 代码如下:
<img width="400" src="/UploadFiles/2021-04-02/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"><script>
var img = document.getElementsByTagName('img')[0]
var width = getWH(img, 'width') // 400
</script>
很明显,400不是图片的原始宽度。
有一种方式可以获取到,直接创建一个新img对象,然后把旧img的src赋值给新的,这时候获取新img的宽度即可
复制代码 代码如下:
<img width="400" src="/UploadFiles/2021-04-02/rBEhVlNhh8wIAAAAAADmFBLo1twAAM26gOmCgYAAOYs716.jpg"><script>
function getNaturalWidth(img) {
var image = new Image()
image.src = img.src
var naturalWidth = image.width
return naturalWidth
}
var img = document.getElementsByTagName('img')[0]
getNaturalWidth(img) // 690
</script>
需要注意的是,这里新创建的image是不需要添加的DOM文档里的。
HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。改造下获取图片尺寸的方法。
复制代码 代码如下:
function getImgNaturalDimensions(img, callback) {
var nWidth, nHeight
if (img.naturalWidth) { // 现代浏览器
nWidth = img.naturalWidth
nHeight = img.naturalHeight
} else { // IE6/7/8
var imgae = new Image()
image.src = img.src
image.onload = function() {
callback(image.width, image.height)
}
}
return [nWidth, nHeight]
}
注意IE6/7/8的处理,创建了一个新的img,仅设置其src,这时需要让图片完全载入后才可以获取其宽高。因此这里是异步的,可以传一个回调,回调里把原始的宽高作为参数传入。
图片原始尺寸
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 5.2版本恰斯卡专属武器介绍,版本新信息
- 瓶子解说 王者荣耀女娲视频教学
- 新版回忆礼册系统详解!魔盒获取速度加快
- 黄翊.1989-冬季等到夏季【新艺宝】【WAV+CUE】
- 群星.1998-百代情歌竞技长女子组【EMI百代】【WAV+CUE】
- 巫奇.1995-犯错【滚石】【WAV+CUE】
- 《COD21》本周即将上线丧尸模式与“核弹小镇”地图
- 《龙腾世纪:影障守护者》IGN 9分:重振系列荣光!
- 《怪物猎人:荒野》玩家评分4.9 支持画面或性能模式
- 七日世界影日洞穴据点神秘宝箱在哪 影日洞穴据点神秘宝箱收集攻略
- 光遇姆明季先祖在哪里 姆明季先祖位置一览
- 原神5.4卡池爆料角色 5.4卡池预测
- 炉石传说亡灵流最终阵容推荐 酒馆战棋亡灵流最终阵容图文一览
- 炉石传说海盗流最终阵容推荐 酒馆战棋海盗流最终阵容图文一览
- 炉石传说元素流最终阵容推荐 酒馆战棋元素流最终阵容图文一览