通过Javascript确定图像文件大小+尺寸？ [英] Determining image file size + dimensions via Javascript?

问题描述

作为网络应用程序的一部分，一旦图像下载并在网页上呈现，我需要在浏览器上下文中确定图像的文件大小（kb）和分辨率（例如，我可以显示该信息在页面上。显然需要在客户端完成。必须能够在没有ActiveX控件或Java小程序的情况下解决x浏览器（IE7 +，FF3 +，Safari 3 +，IE6很好），尽管它没有每个浏览器必须是相同的解决方案。

As part of a web app, once images have been downloaded and rendered on a web page, I need to determine an image's file size (kb) and resolution within the browser context (so I could, for example, display that info on the page. This needs to be done client-side, obviously. Must be able to be solved x-browser without an ActiveX control or Java applet (IE7+, FF3+, Safari 3+, IE6 nice to have), though it doesn't have to be the same solution per browser.

理想情况下，这将使用系统Javascript完成，但如果我绝对需要一个JQuery或类似的库（或一小部分库）它可以做到。

Ideally this would be done using system Javascript, but if I absolutely need a JQuery or similar library (or a tiny subset of it), that could be done.

推荐答案

编辑：

要获取除边框和边距之外的DOM元素（在您的IMG元素中）的当前浏览器内像素大小，您可以使用 clientWidth 和 clientHeight 属性。

To get the current in-browser pixel size of a DOM element (in your case IMG elements) excluding the border and margin, you can use the clientWidth and clientHeight properties.

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

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

现在要获取文件大小，现在我只能考虑 fileSize属性 Internet Explorer公开文档和 IMG 元素......

Now to get the file size, now I can only think about the fileSize property that Internet Explorer exposes for document and IMG elements...

编辑2：我想到了什么......

Edit 2: Something comes to my mind...

要获得托管在服务器上的文件的大小，可以使用Ajax简单地制作 HEAD HTTP请求。这种请求用于获取有关请求隐含的url的元信息，而不会在响应中传输任何内容。

To get the size of a file hosted on the server, you could simply make an HEAD HTTP Request using Ajax. This kind of request is used to obtain metainformation about the url implied by the request without transferring any content of it in the response.

在HTTP请求结束时，我们可以访问响应HTTP标头，包括 Content-Length 表示以字节为单位的文件大小。

At the end of the HTTP Request, we have access to the response HTTP Headers, including the Content-Length which represents the size of the file in bytes.

使用raw XHR ：

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请求时，您是受同源政策的限制，该政策允许您仅在同一域内发出请求。

Note: Keep in mind that when you do Ajax requests, you are restricted by the Same origin policy, which allows you to make requests only within the same domain.

检查此处的工作概念验证。

编辑3：

1。）关于Content-Length，我认为这个尺寸例如，如果服务器响应是gzip压缩，则可能会发生不匹配，您可以进行一些测试以查看是否在您的服务器上发生这种情况。

1.) About the Content-Length, I think that a size mismatch could happen for example if the server response is gzipped, you can do some tests to see if this happens on your server.

2。）获取原始尺寸在图像中，您可以通过编程方式创建IMG元素，例如：

2.) For get the original dimensions of a image, you could create an IMG element programmatically, for example:

var img = document.createElement('img');

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

img.src='http://sstatic.net/so/img/logo.png';

这篇关于通过Javascript确定图像文件大小+尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！