php根据图片地址获取图片原始高宽,JS怎么获取图片原始宽高

JS获取图片原始宽高即图片原始尺寸,我们可以通过HTML5 naturalWidth和naturalHeight属性来获取图片原始尺寸。使用HTML5图像naturalWidth和naturalHeight属性,能够很容易地找到图像的原始的宽度和高度。

31b674dae71ffab542fb4d19e053a82c.png

那么在前面的文章中,已经给大家介绍过JS获取图片当前宽高的方法,其实与获取原始宽高的方法类似,需要的朋友可以先行参考。

下面我们就继续结合具体的代码示例,给大家介绍js获取原始图片尺寸大小的方法。

代码示例如下:

js获取图片原始宽高的示例

function imgSize(){

var myImg = document.querySelector("#sky");

var realWidth = myImg.naturalWidth;

var realHeight = myImg.naturalHeight;

alert("原始 width=" + realWidth + ", " + "原始 height=" + realHeight);

}

png

获取

不同于获取图片当前宽高的clientWidth和clientHeight属性,获取图片原始尺寸主要是通过naturalWidth和naturalHeight属性。这两个属性获取的图片原始宽高,不会因外部width和height属性设置的改变而改变。

这里我们使用的图片,原始宽高如下:716x565px;

339d376794c516ce2e9fcbd0dedfbe49.png

那么用上述js代码获取图片原始尺寸结果如下图所示:

14ff120d8949b9ef30eef3dae5190b48.gif

注:querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

本篇文章就是关于js获取图片原始宽高的方法介绍,也很简单,希望对需要的朋友有所帮助!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值