如何使用 JavaScript 获取图像文件大小和尺寸？

通过 JavaScript 确定图像的文件大小和尺寸

问题：

你怎么能仅使用 JavaScript 确定网页上呈现的图像的文件大小（以 KB 为单位）和分辨率跨浏览器兼容方式？

答案：

获取像素尺寸：

检索当前浏览器内像素图像元素的大小，不包括边框和边距，请使用以下内容JavaScript:

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

var width = img.clientWidth;
var height = img.clientHeight;

检索文件大小:

• 选项 1：HEAD HTTP 请求（推荐）

使用 XMLHttpRequest 向托管图像的服务器发出 HEAD 请求。 HTTP 响应中的 Content-Length 标头包含文件大小（以字节为单位）。

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);

• 选项 2：元素文件大小属性（仅限 IE）

此方法仅适用于互联网资源管理器：

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

获取原始图像尺寸：

以编程方式创建 IMG 元素并使用其 onload 事件检索原始图像尺寸：

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中文网其他相关文章！