• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Page Details / Get the size of an image

Get the size of an image

Get the size of an image

These snippets will get the height and width of an image, one when it is loaded and another when the image is not loaded yet.

Image is already loaded

const image = document.querySelector(...);

// Get the original size
const naturalWidth = image.naturalWidth;
const naturalHeight = image.naturalHeight;

// Get the scaled size
const width = image.width;
const height = image.height;

Image is not loaded yet

Listen on the load event to calculate the size of image which can be loaded via a given URL:

const image = document.createElement('img');
image.addEventListener('load', function(e) {
    // Get the size
    const width = e.target.width;
    const height = e.target.height;
});

// Set the source
image.src = '/path/to/image.png';

We can use a Promise to turn the snippet to a reusable function:

const calculateSize = function(url) {
    return new Promise(function(resolve, reject) {
        const image = document.createElement('img');
        image.addEventListener('load', function(e) {
            resolve({
                width: e.target.width,
                height: e.target.height,
            });
        });

        image.addEventListener('error', function() {
            reject();
        });

        image.src = url;
    });
};

calculateSize('/path/to/image.png').then(function(data) {
    const width = data.width;
    const height = data.height;
});

Source

https://htmldom.dev/get-the-size-of-an-image/

Page Details

Related Snippets:

  • Hexadecimal Color Wheel
  • Check if the browser tab of the page is focused
  • Copyright Notice
  • Get the Width and Height of the Window

Primary Sidebar

FREE UPDATES!

Get the latest updates in your inbox for FREE!

Popular Posts

Story Generator

IP Grabber

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2022 JavaScriptSource.com

  • About
  • Privacy Policy
  • Submit
  • FAQ
  • Jobs For Developers
  • Contact Us