获取图像的原始尺寸

Question

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

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

Answer 1

修改：

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

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

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

编辑2：我想到了一些事情......

要获取服务器上托管的文件的大小，您只需使用Ajax创建HEAD HTTP Request即可。这种请求用于获取有关请求所暗示的URL的元信息，而不会在响应中传输任何内容。

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

使用原始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请求时，您受到Same origin policy的限制，这允许您仅在同一域内发出请求。

检查工作概念证明here。

编辑3：

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

2.。）为了获得图像的原始尺寸，您可以以编程方式创建IMG元素，例如：

var img = document.createElement('img'); img.onload = function () { alert(img.width + ' x ' + img.height); }; img.src='http://sstatic.net/so/img/logo.png';

Answer 2

使用Javascript检查上传的图片尺寸

<script type="text/javascript">
    function check(){
      var imgpath=document.getElementById('imgfile');
      if (!imgpath.value==""){
        var img=imgpath.files[0].size;
        var imgsize=img/1024; 
        alert(imgsize);
      }
    }
</script>

Html代码

<form method="post" enctype="multipart/form-data" onsubmit="return check();">
<input type="file" name="imgfile" id="imgfile"><br><input type="submit">
</form>

Answer 3

获取图像的原始尺寸

如果您需要获取原始图片尺寸（不在浏览器上下文中）， clientWidth 和 clientHeight 属性不起作用，因为如果图像是通过css拉伸/收缩。

要获得原始图片尺寸，请使用 naturalHeight 和 naturalWidth 属性。

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

var width = img.naturalWidth;
var height = img.naturalHeight;

p.s。由于接受的答案完成了工作，因此无法回答原始问题。相反，它就像添加它一样。

Answer 4

服务工作者可以访问标题信息，包括Content-Length标题。

服务工作者理解起来有点复杂，所以我建立了一个名为sw-get-headers的小型库。

比你需要：

订阅图书馆的response活动
在所有网络请求中识别图像的网址
在这里，您可以阅读Content-Length标题！

请注意，您的网站需要使用 HTTPS 才能使用Service Workers，浏览器需要与服务工作者兼容，并且图片必须位于与您的页面相同的来源。

Answer 5

这个怎么样：

df$ID <- code$new_ID[match(df$ID, code$orig_ID)]

http://qnimate.com/javascript-create-file-object-from-url/

由于同源政策，只能在同一来源下工作

Answer 6

您可以使用getElement(...).width和...height获取尺寸。

由于安全原因JavaScript无法访问本地磁盘上的任何内容，因此无法检查本地文件。对于浏览器缓存中的文件也是如此。

您确实需要一个可以处理AJAX请求的服务器。在该服务器上，安装一个下载映像的服务，并将数据流保存在虚拟输出中，该输出只计算字节数。请注意，由于图像数据可能已编码，因此您无法始终依赖Content-length标头字段。否则，发送HTTP HEAD请求就足够了。

Answer 7

大多数人已经回答了如何知道下载图像的尺寸，所以我只想回答问题的其他部分 - 知道下载图像的文件大小。

您可以使用资源计时api执行此操作。非常具体的transferSize，encodedBodySize和decodingBodySize属性可用于此目的。

如果您寻求以下内容，请查看我的答案以获取代码段和更多信息：JavaScript - Get size in bytes from HTML img src

Answer 8

您可以使用通用 Image 对象动态加载源然后对其进行测量：

    const img = new Image();
    img.src = this.getUrlSource()
    img.onload = ({target}) =>{
      let width = target.width;
      let height = target.height;
    }

Answer 9

您可以使用

之类的内容在页面上找到图像的尺寸

document.getElementById('someImage').width

文件大小，但是，你必须使用服务器端的东西

Answer 10

关于宽度和高度：

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

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

关于文件大小，您可以使用performance

var size = performance.getEntriesByName(url)[0];
console.log(size.transferSize); // or decodedBodySize might differ if compression is used on server side

Answer 11

var img = new Image();
img.src = sYourFilePath;
var iSize = img.fileSize;

Answer 12

您唯一能做的就是将图像上传到服务器，并使用C＃等服务器端语言检查图像大小和尺寸。

编辑：

仅使用javascript无法完成您的需求。

通过Javascript确定图像文件大小+尺寸？

12 个答案:

获取图像的原始尺寸