欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-18 18:46:28
...

获取图片的真实尺寸

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://*.com/questions/1310378/determining-image-file-size-dimensions-via-javascript

相关标签: 前端 html