Javascript 获取图片的真实宽高和文件大小

「爱情、让人受尽委屈。」 2022-11-14 10:24 237阅读 0赞

#### 获取图片的真实尺寸 ####

getImageSize(imgSrc) { 
        return new Promise((resolve, reject) => { 
          const newImg = new Image();
          newImg.onload = () => { 
            resolve([newImg.width, newImg.height]);
          };
          newImg.onerror = (err) => { 
          	reject(err);
          }
          newImg.src = imgSrc; 
        });
      }

#### 获取文件尺寸 ####

只能通过xhr请求图片资源，之后获取数据头中的content-length

但值得注意的是，静态资源一般而言是被gzip压缩的。所以这个方法正常情况下是不准确的。

var xhr = new XMLHttpRequest();
    xhr.open('HEAD', 'img/test.jpg', true);
    xhr.onreadystatechange = function(){ 
      if ( xhr.readyState == 4 ) { 
        if ( xhr.status == 200 ) { 
          alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
        } else { 
          alert('ERROR');
        }
      }
    };
    xhr.send(null);

#### 参考 ####

[https://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript][https_stackoverflow.com_questions_1310378_determining-image-file-size-dimensions-via-javascript]

[https_stackoverflow.com_questions_1310378_determining-image-file-size-dimensions-via-javascript]: https://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS获取本地图片和网络图片的宽高尺寸和存储大小

最新更新时间：2020年07月08日09:13:28 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：图片作为一种记录信息的载体，

左手的ㄟ右手/ 2023年02月24日 03:43/ 0 赞/ 21 阅读

相关 JAVA获取图片的宽、高和大小

JAVA获取图片的宽、高、大小如果是本地磁盘文件 File file = new File("C:\\Users\\root\\Desktop\\test.jpg

谁借莪１个温暖的怀抱￠/ 2023年01月22日 11:46/ 0 赞/ 397 阅读

相关 JS根据url获取图片真实宽高 && 上传图片获取真实宽高

根据url获取真实宽高 var url = require("url"); var http = require("http"); var siz

约定不等于承诺〃/ 2023年01月21日 03:27/ 0 赞/ 21 阅读

相关通过jquery获取图片真实宽高

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

末蓝、/ 2022年11月29日 11:51/ 0 赞/ 196 阅读

相关 Javascript 获取图片的真实宽高和文件大小

获取图片的真实尺寸 getImageSize(imgSrc) { return new Promise((resolve, reject) =>

「爱情、让人受尽委屈。」/ 2022年11月14日 10:24/ 0 赞/ 238 阅读

相关 js获取图片宽高

原文链接：http://www.qttc.net/201304304.html 快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onloa

港控/mmm°/ 2022年08月18日 02:59/ 0 赞/ 282 阅读

相关获取远程图片的宽、高和大小

php中获取远程图片的宽、高和大小，这里介绍两种方法：方法一： function getImageinfo($url) { $result = array(

浅浅的花香味﹌/ 2022年06月17日 02:57/ 0 赞/ 335 阅读

相关 javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813

谁践踏了优雅/ 2022年06月08日 13:52/ 0 赞/ 412 阅读

相关 javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813

男娘i/ 2022年05月21日 08:12/ 0 赞/ 265 阅读

相关 jquery获取图片真实宽高

<img id="image" src="../img/1.jpg" /> $(function() { var imgSrc = $("image

太过爱你忘了你带给我的痛/ 2021年12月05日 02:05/ 0 赞/ 321 阅读