/html-dom /Basic
GitHub 5008★

Get the size of an image

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;
});

Use case

Assume that you want to show the size of avatar which can be uploaded via a file input:

<input type="file" id="avatar" />

<!-- Display the size -->
<div id="size" />

First, we need to get the selected file, and then load it via FileReader:

const avatarEle = document.getElementById('avatar');
const sizeEle = document.getElementById('size');

avatarEle.addEventListener('change', function (e) {
// Get the selected file
const file = e.target.files[0];

const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('loadend', function (e) {
const src = e.target.result;

calculateSize(src).then(function (data) {
const width = data.width;
const height = data.height;

sizeEle.innerHTML = `${width} x ${height}`;
});
});
});

See also

Follow me on and to get more useful contents.