113

I have a base64 img encoded that you can find here. How can I get the height and the width of it?

Donald Duck
  • 7,638
  • 19
  • 69
  • 90
bombastic
  • 2,761
  • 8
  • 18
  • 18

5 Answers5

175
var i = new Image(); 

i.onload = function(){
 alert( i.width+", "+i.height );
};

i.src = imageData;
gp.
  • 7,751
  • 3
  • 38
  • 38
50

For synchronous use just wrap it into a promise like this:

function getImageDimensions(file) {
  return new Promise (function (resolved, rejected) {
    var i = new Image()
    i.onload = function(){
      resolved({w: i.width, h: i.height})
    };
    i.src = file
  })
}

then you can use await to get the data in synchronous coding style:

var dimensions = await getImageDimensions(file)
EscapeNetscape
  • 2,723
  • 1
  • 30
  • 32
  • 5
    It's still asynchronous though. Just using syntactic sugar. – gustavopch Jul 15 '19 at 23:27
  • 1
    'naturalWidth' and 'naturalHeight` are the better choices no? https://stackoverflow.com/questions/28167137/whats-the-difference-between-width-naturalwidth-and-clientwidth – Crashalot Dec 27 '19 at 23:28
22

I found that using .naturalWidth and .naturalHeight had the best results.

const img = new Image();

img.src = 'https://via.placeholder.com/350x150';

img.onload = function() {
  const imgWidth = img.naturalWidth;
  const imgHeight = img.naturalHeight;

  console.log('imgWidth: ', imgWidth);
  console.log('imgHeight: ', imgHeight);
};

Docs:

This is only supported in modern browsers. http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

ggorlen
  • 33,459
  • 6
  • 59
  • 67
Bill Keller
  • 723
  • 5
  • 21
2

Create a hidden <img> with that image and then use jquery .width() and . height()

$("body").append("<img id='hiddenImage' src='"+imageData+"' />");
var width = $('#hiddenImage').width();
var height = $('#hiddenImage').height();
$('#hiddenImage').remove();
alert("width:"+width+" height:"+height);

Test here: FIDDLE

Image is not initially created hidden. it gets created, then you get width and height and then remove it. This may cause a very short visibility in large images in this case you have to wrap the image in another container and make that container hidden not the image itself.

Another Fiddle that does not add to dom as per gp.'s anser : HERE

Desu
  • 346
  • 1
  • 9
  • 1
    var i = new Image(); i.src = imageData; setTimeout(function(){ alert ( "width:"+ i.width+" height:" + i.height ); },100); – gp. Jul 21 '13 at 17:59
  • this is only a fix needed because of the nature of the jsfiddle, you can change onLoad to onDomReady instead to fix that initial 0 width and height problem. Code assumes you call this function somewhere in your work where document is already loaded. – Desu Jul 21 '13 at 18:04
  • 1
    Guess your point being was, that you do not need to add anything to dom to get width and height. Will modify answer to reflect your suggestions. – Desu Jul 21 '13 at 18:14
1

A more modern solution is to use HTMLImageElement.decode() instead of the onload event. decode() returns a promise, thus can be used synchronously with await.

Asynchronous use:

let img = new Image();
img.src = "myImage.png";
img.decode().then(() => {
    let width = img.width;
    let height = img.height;
    // Do something with dimensions
});

Synchronous use (inside async function):

let img = new Image();
img.src = "myImage.png";
await img.decode();
let width = img.width;
let height = img.height;
// Do something with dimensions
Wilt
  • 37,062
  • 11
  • 138
  • 192
Waruyama
  • 2,984
  • 1
  • 24
  • 38