Get Height/width Of Image In Javascript (ideally Without Loading The Image At All)

Sorry if this has already been answered, but I can't find it if so. I want to find the height and width of an image file in Javascript. I don't actually need to show the image in t

Solution 1:

If the image is not loaded, it won't have its' height and width set. You have to wait until the image is fully loaded, then inspect its' size. Maybe something along these lines:

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

Solution 2:

The following code will get you the width/height without waiting for the image to load completely, making it significantly faster than the other solutions here.

For testing change abc123 in image source to any random string to prevent caching.

There is a JSFiddle Demo as well.

<divid="info"></div><imgid="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);
});

functiongetImageSize(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>

Solution 3:

The height and width properties of an image element (like the offsetHeight and offsetWidth properties of any element), return 0 instead of the actual values until it has been added to some document (and if its style.display attribute is not set to "none"). A common way to work around this is displaying the image outside the visible area of your page; your users will not see it, and its height and width properties will return the actual values instead of 0. Then you should remove the image from the document.

var img = newImage();
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 thisdocument.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)

Solution 4:

If you check this link here is a method to get all the image dimensions in a directory with PHP which checks it without having to load it to the page. This might help you. You can pass it to your js with a

var dimensions = <?phpecho json_encode($imageDimensions)?>

PHP Get dimensions of images in dir

I think this is a better approach if you really don't want to load the images