Question

很抱歉，如果已经回答了这个问题，但是如果是这样的话我就找不到了。

我想在Javascript中找到图像文件的高度和宽度。我实际上不需要在页面中显示图像，只需要显示高度和宽度。

目前我已经获得了以下代码，但它返回的高度和宽度为0（在Mozilla 5中）。

  var img = new Image();
  img.src = "./filename.jpg";
  var imgHeight = img.height;
  var imgWidth = img.width;
  alert("image height = "  + imgHeight + ", image width = " + imgWidth);

该文件肯定存在，它与HTML位于同一目录中，并且没有高度和宽度0：）

我做错了什么？

Answer 1

如果未加载图像，则不会设置其高度和宽度。您必须等到图像完全加载，然后检查其大小。也许是这些方面的东西：

function getWidthAndHeight() {
    alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
    return true;
}
function loadFailure() {
    alert("'" + this.name + "' failed to load.");
    return true;
}
var myImage = new Image();
myImage.name = "image.jpg";
myImage.onload = getWidthAndHeight;
myImage.onerror = loadFailure;
myImage.src = "image.jpg";

Answer 2

以下代码将为您提供宽度/高度，而无需等待图像完全加载，使其明显快于此处的其他解决方案。

用于测试图像源中的更改abc123到任意随机字符串以防止缓存。

还有一个JSFiddle Demo。

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>

Answer 3

图像元素的高度和宽度属性（如任何元素的offsetHeight和offsetWidth属性），返回0而不是实际值，直到它被添加到某个文档（如果它的style.display属性未设置为“none”）。
解决此问题的常见方法是在页面的可见区域外显示图像;您的用户将看不到它，其高度和宽度属性将返回实际值而不是0。然后，您应该从文档中删除图像。

var img = new Image();
img.src = "./filename.jpg";
img.style.position = "absolute";
img.style.left = -9999;             // Image width must not exceed 9999 pixels
img.style.visibility = "hidden";    // Maybe you can remove this
document.body.appendChild(img);
var imgHeight = img.height;
var imgWidth = img.width;
alert("image height = "  + imgHeight + ", image width = " + imgWidth); 
document.body.removeChild(img);     // Removes the image from the DOM (This does not destroy the image element)

Answer 4

如果您在此处查看此链接，则可以使用PHP获取目录中的所有图像维度，并在不必将其加载到页面的情况下对其进行检查。这可能对你有帮助。你可以用

将它传递给你的js

var dimensions = <?php echo json_encode($imageDimensions)?>

PHP Get dimensions of images in dir

如果您真的不想加载图片，我认为这是一种更好的方法

在Javascript中获取图像的高度/宽度（理想情况下，根本不加载图像）

4 个答案: