如何找到base64图像的宽度和高度

Question

How to find the base64 image width and height

<img id="thumb0" width="200" height="200" 
src="data:image/png;base64, ................">

Image property width and height are constant as i need to show them as thumb nail, but where as the original image properties are different.

I need to get the original image height and width.

Suppose my original image height and width are 750 X 500

I tried like this but getting the property width and height

$("#thumb0").width();

value is 200 .

Please help how to get orginal width and height of the image.

Answer 1

You can build another image element and get its size :

var img = new Image();
img.src = $('#thumb0').attr('src');
var originalWidth = img.width;

Answer 2

The Image() constructor for HTMLImageElements mentioned in dystroy's answer is the right way to go, but there's a caveat: The constructor is actually asynchronous! As a result, you may experience unexpected behavior in certain browsers; from my limited experiments, dystroy's code will work 100% of the time in Chrome, but only sometimes in Firefox and Safari. Don't know about others.

The right way to do it seems to be with an onload handler , as in:

var img = new Image();
img.src = some_base64_image_source;
console.log(img.width);       // This might print out 0!
img.onload = function() {
    console.log(img.width);   // This will print out the width.
}