首页 > web前端 > js教程 > 正文

如何在 JavaScript 中获取图像文件大小和尺寸?

Susan Sarandon
发布: 2024-11-10 10:38:02
原创
211 人浏览过

How Can I Get Image File Size and Dimensions in JavaScript?

在 Javascript 中确定图像文件大小和尺寸

在 Web 应用程序中,直接从以下位置确定图像的文件大小(以 kb 为单位)和分辨率浏览器上下文对于各种目的至关重要,例如在页面上显示此信息。本文探讨了在不依赖 ActiveX 控件或 Java 小程序的情况下实现此跨浏览器功能的解决方案。

检索图像尺寸

获取图像元素的像素大小在浏览器中,不包括边框和边距,可以使用 clientWidth 和 clientHeight属性:

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;
登录后复制

确定文件大小

不幸的是,浏览器 API 缺乏对访问图像文件大小的直接支持。不过,解决方法是使用 Ajax 发出 HEAD HTTP 请求:

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);
登录后复制

注意:此方法受同源策略约束,仅允许同一域内的请求。

额外注意事项

  • 如果响应被压缩(例如,gzipped),Content-Length 标头值可能无法准确反映实际图像大小。
  • 要在不将图像完全加载到文档中的情况下获取原始图像尺寸,请以编程方式创建图像元素并指定图像源:
var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='http://sstatic.net/so/img/logo.png';
登录后复制

以上是如何在 JavaScript 中获取图像文件大小和尺寸?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板