如何使用 JavaScript 确定图像的文件大小和尺寸？

使用 Javascript 确定图像文件大小和尺寸

在 Web 应用程序中，有必要检索有关网页上显示的图像的信息。一种常见的要求是完全在浏览器上下文中确定图像的文件大小和分辨率。本文探讨了完成此任务的各种跨浏览器技术。

获取图像尺寸

要确定网页上显示的图像的分辨率，您可以使用包含图像的 DOM 元素的 clientWidth 和 clientHeight 属性。此方法返回浏览器中图像的像素尺寸，不包括任何边框或边距。

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

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

检索文件大小

获取某个文件的文件大小图像，一种选择是使用 Internet Explorer 中针对文档和 IMG 元素提供的 fileSize 属性。不过，这种方法仅限于 IE，其他浏览器不支持。

使用 HEAD HTTP 请求

更通用的技术是向图像的网址。 HEAD 请求检索有关资源的元数据而不下载其内容。响应标头包含 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);

注意： Ajax 请求受同源策略约束，这意味着它们只能访问资源来自与网页相同的域。

检索原始图像尺寸

要在调整大小或裁剪之前确定图像的原始尺寸，您可以以编程方式创建 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中文网其他相关文章！