Getting the original size of a scaled image

Question

How can I get the original, unscaled, size of an image from javascript if my image is like this: <img src="picture.png" style="max-width:100px">?

I found my answer, you can use img.naturalWidth to get the original width

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

Source

@bugster How can we implement this in order to get the original size of a scaled image in a website? If there is no access to the website, how is it possible to take the original image then? Consider that the original image url is a public link. — Datacrawler, Jun 02 '15 at 22:28

score 4 · Answer 1 · answered Dec 20 '11 at 17:27

4

One way to do it is to create another image element, set its src to the original's src, and then reading its width. This should be inexpensive as the browser should have already cached the image.

var i = document.getElementById('myimg');

var i2 = new Image();
i2.onload = function() {
   alert(i2.width);
};

i2.src = i.src;

Here is a fiddle: http://jsfiddle.net/baZ4Y/

answered Dec 20 '11 at 17:27

Matt Greer

60,826
17
123
123

That's how I do it too, however creating a new object, complete with image data, and relying on the browser's internal caching mechanisms to not bog things down seems wasteful to me. There has got to be a better way. – Andri Dec 20 '11 at 17:29
Pekka pointed out this has been answered before, and that was the approach in that question too. Possibly this is just one little edge case that browsers/JS don't have a good mechanism for handling. – Matt Greer Dec 20 '11 at 17:32

Jonathan Cox · Answer 2 · 2016-11-25T21:09:35.160

EDIT: This method is useful if you want to retrieve the computed size of an image after it is rendered on a page, but before you transform its size with scale. If you just want the original size of the image, use the methods above.

Try writing the scale of the image to a data attribute when you scale it. Then you can easily divide the new dimensions by that scale attribute to retrieve the original size. It might look something like this:

// Set the scale data attribute of the image
var scale = 2;
img.dataset.scale = scale;

...

// Later, retrieve the scale and calculate the original size of the image
var s = img.dataset.scale;
var dimensions = [img.width(), img.height()];
var originalDimensions = dimensions.map(function(d) {return d / parseFloat(s)});

Alternatively, you can just retrieve the scale of the image directly using jQuery and regex.

var r = /matrix\(([\d.]+),/;
try {
  var currentTransform = $swiper.css('transform');
  var currentScale = currentTransform.match(r)[1];
}
// Handle cases where the transform attribute is unset
catch (TypeError) {
  currentScale = 1;
}

This makes more intuitive sense to me than creating an entirely new image and relying on the browser's caching for it to load quickly.

This doesn't work if an image is scaled by parameters in the `` tag. Images have a `.naturalWidth` and `.naturalHeight` property that let you get the original dimensions directly. — Bugster, Nov 25 '16 at 19:49
I see. For my use case I needed to get not the original dimensions of the image, but the size of the image as rendered on the page before it was scaled. Since I was sizing images with different original sizes to fit a div, the `.naturalWidth` and `.naturalHeight` properties didn't work for me, but this method did. Do you mind if I leave this answer up in case someone comes here with the same problem that I did, or should I take it down? — Jonathan Cox, Nov 25 '16 at 21:03

Getting the original size of a scaled image

2 Answers2