获取图片显示尺寸

在js中可以通过width和height来获取显示的宽高。
在jQuery中可以通过width()方法和height()方法来获取显示的宽高。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="application/javascript">window.onload = function () {// js获取图片显示尺寸var img = document.getElementById('csdnImg');var imgWidth = img.width;var imgHeight = img.height;console.log('js', imgWidth, imgHeight); // 120 45};$(function () {var img = $('#csdnImg');var imgWidth = img.width();var imgHeight = img.height();console.log('jQuery', imgWidth, imgHeight); // 120 45});</script>
</head>
<body>
<img id="csdnImg" src="http://www.csdn.net/css/logo.png" style="width: 120px; height: 45px;" width="480" height="180">
</body>
</html>

注：

如果不是在onload函数里执行代码，不确定图片是否加载完成时，可以使用 img.complete 来判断图片是否加载完成。

获取图片原图尺寸

现在我们有需求，获取图片真实的尺寸，一般而言，有两种方式可以做到。
我们仅使用js做演示。

使用 new Image() 方法

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="application/javascript">window.onload = function () {// 通过 new Image 获取图片真实尺寸var csdnImg = document.getElementById('csdnImg');var img = new Image();var naturalWidth, naturalHeight;img.onload = function () {naturalWidth = this.width;naturalHeight = this.height;console.log('new Image()', naturalWidth, naturalHeight); // 240 90};img.src = csdnImg.src;};</script>
</head>
<body>
<img id="csdnImg" src="http://www.csdn.net/css/logo.png" style="width: 120px; height: 45px;" width="480" height="180">
</body>
</html>

注意：

new Image() 新生成的图片并不会添加到文档当中，如果有需要，可以手动添加。
img.src 一般要放到 img.onload 之后。
如果图片并没有显示到文档中，一般可以使用该方法获取原图尺寸。

使用 naturalWidth 属性

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="application/javascript">window.onload = function () {// 通过natural属性获取图片真实尺寸var csdnImg = document.getElementById('csdnImg');var naWith, naHeight;naWith = csdnImg.naturalWidth;naHeight = csdnImg.naturalHeight;console.log('naturalAttr', naWith, naHeight); // 240 90};</script>
</head>
<body>
<img id="csdnImg" src="http://www.csdn.net/css/logo.png" style="width: 120px; height: 45px;" width="480" height="180">
</body>
</html>

注意：

这是HTML5新增的属性，有兼容性问题，使用前需要判断。

HTML5获取图片原图尺寸相关推荐

javascript 获取图片原始尺寸
javascript 获取图片原始尺寸 1 function getImgInfo(url){ 2 var img = new Image(), loaded = false; 3 var info ...
html无法获取图片高宽,如何解决谷歌浏览器下jquery无法获取图片的尺寸
代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...
JS上传图片时获取图片的尺寸
JS上传图片时获取图片的尺寸图片上传目前主流的第三方插件都会提供Upload组件,也就是我们常说的文件上传插件,例如Element antd 等,他们都提供了beforeUpload ,用于做文件 ...
分享一个js获取图片原始尺寸的方法。亲测，好用！！！
首先,大部分人和网上能搜索到的获取图片分辨率或尺寸的方法,应该都是这样: let url = 'url';function getUrlInfo(url) {let image = new Image ...
python如何获取图片的尺寸_如何基于Python获取图片的物理尺寸
如何基于Python获取图片的物理尺寸这篇文章主要介绍了如何基于Python获取图片的物理尺寸,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下问题 ...
根据图片URL获取图片的尺寸【Swift语言实现】
import UIKit extension UIImage { /// 获取网络图片尺寸 /// /// - Parameter url: 网络图片链接 /// - Returns: 图片尺寸siz ...
前端js获取图片大小扩展名_前端 JS 获取 Image 图像宽高尺寸
前端 JS 获取 Image 图像宽高尺寸简介项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
【高效获取jpeg图片的尺寸】
获取图片的尺寸有三种方法: 1.将整个图片文件加载成 BufferedImage 后获取其尺寸: 2.用 ImageReader 快捷获取 3.即windows xp sp3纯净安装版xp系统下载下文 ...
js上传图片获取图片尺寸
下面这段代码,可以实现本地上传图片,并获取图片的尺寸 <!DOCTYPE html> <html lang="en"><head><met ...

HTML5获取图片原图尺寸

获取图片显示尺寸

获取图片原图尺寸

使用 new Image() 方法

使用 naturalWidth 属性

HTML5获取图片原图尺寸相关推荐

最新文章

热门文章