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

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

在本文中，我们将探讨如何确定文件大小（以千字节为单位）和使用 JavaScript 直接在浏览器上下文中解析图像。此信息对于在网页上显示或执行各种操作非常有价值。

检索像素尺寸

获取图像元素在浏览器，不包括其边框和边距，使用 clientWidth 和 clientHeight properties.

检索文件大小

获取服务器托管文件的大小可以通过 Ajax HEAD HTTP 请求来实现。此方法检索 HTTP 标头而不传输文件内容。 Content-Length 标头提供文件的大小（以字节为单位）。

注意：此方法受同源策略约束，该策略限制对同一域的请求。

检索原始图像尺寸

要确定图像的原始尺寸，请创建 HTML 图像动态元素。设置其 onload 事件以在图像加载后访问其宽度和高度属性。

代码示例：

• 像素尺寸：

  var img = document.getElementById('imageId');
  
  var width = img.clientWidth;
  var height = img.clientHeight;

• 使用 HEAD 请求的文件大小：

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

• 原始图像尺寸：

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