js获取图片原始宽高

本文介绍了如何在HTML5中获取用户上传图片的原始宽度和高度。利用naturalWidth和naturalHeight属性可以直接读取这些信息,该方法适用于IE9+及主流浏览器。对于IE8及以下版本,则提供了一种通过创建新的Image对象来获取尺寸的老方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题产生原因:在做等宽不等高瀑布流布局的时候需要将图片等比例缩小,每张图片的宽度是一定的,现在要根据图片宽度的缩放比例去缩放它的宽度。这个时候就要获取到图片的原始宽度和原始高度,(图片为用户上传,无法知道原始高度和宽度)。

解决办法:1.上网查了一圈发现,HTML5中有个属性可以查看,即naturalWidth 和naturalHeight属性。

var naturalW = img.naturalWidth;
var naturalH = img.naturalHeight;

2.上述方法已经在ie9+ 、firefox、chrome、safari和opera都支持了,如果要兼容ie8以下的,就要使用下面这个老方法了。

var image = document.getElementById('img');
var i = new Image(); i.src = image.src; var naturalW = i.width;
var naturalH = i.height;

转载于:https://www.cnblogs.com/YuKiee/p/7256160.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值