Synchronously retrieve image resolution

user_1404638 0
Viewed 277

I require a function that takes URL as an argument to some image, and synchronously returns the resolution. I would like the function to simply hang while the image is being retrieved.

Something along those lines:

function getImageDimensions(imageData) {
    $("body").append("<img id='hiddenImage' src='" + imageData />"');

    /* Wait until image is loaded */

    var width = $('#hiddenImage').width();
    var height = $('#hiddenImage').height();
    $('#hiddenImage').remove();
    return width;
}
jquery javascript
3 Answers

Edit I completely miss this. You can do it with simply moving your code inside $img.on('load', function() {...} like below.

function getImageDimensions(imageData) {
  var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
  
  $img.on('load', function() {
    /* Wait until image is loaded */
    var width = $('#hiddenImage').width();
    var height = $('#hiddenImage').height();
    $('#hiddenImage').remove();
    alert('width = ' + width);
    console.log(width);
  });
  
  $("body").append($img);
}

getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Alternatively Rather than trying to make it synchronous why don't you try making it async. Update your function to be async return Promise and resolve it when img is loaded.

Call getImageDimensions from another async function and use await getImageDimensions just in below I have done it with test.

async function getImageDimensions(imageData) {
  return new Promise((resolve) => {
    var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
    $img.on('load', function() {
    /* Wait until image is loaded */      
      var width = $('#hiddenImage').width();
      var height = $('#hiddenImage').height();
      $('#hiddenImage').remove();
      alert('width = ' + width);
      resolve(width);
    });

    $("body").append($img);
  });
}

async function test() {
  let a = await getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);
  console.log(a);
}

test();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Or alternatively you can use Promise with then and resolve it from onload after which callback function will be called from then. So it will work similarly as synchronous code. You can write code which should be done after img is loaded inside then.

function getImageDimensions(imageData) {
  new Promise((resolve) => {
    var $img = $(`<img id='hiddenImage' src='${imageData}' />`);
    $img.on('load', function() {
      resolve($img);
    });
    $("body").append($img);

  }).then((result) => {
    /* Wait until image is loaded */
    var width = $('#hiddenImage').width();
    var height = $('#hiddenImage').height();
    $('#hiddenImage').remove();
    alert('width = ' + width);
    console.log(width);
  });
}

getImageDimensions(`https://i.stack.imgur.com/L6RvS.png?s=48&g=1`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

user_96952860

You can do something like that:

function getImageDimensions(imageData) {    
  var image = new Image();
  image.onload = function(data){
    var width = data.target.width;
    return width;
  }
  image.src = imageData;
}
user_81040220

A function cannot return multiple values. However, you can get the similar results by returning an array containing multiple values. You can return an array of values.

function getImageDimensions(imageData) {
    $("body").append("<img id='hiddenImage' src='" + imageData />"');

    /* Wait until image is loaded */

    var width = $('#hiddenImage').width();
    var height = $('#hiddenImage').height();
    $('#hiddenImage').remove();
    var size = [width, height];
    return size;
}

Alternatively, you can also return an object if you want to label each of the returned values for easier access and maintenance

function getImageDimensions(imageData) {
    $("body").append("<img id='hiddenImage' src='" + imageData />"');

    /* Wait until image is loaded */

    var width = $('#hiddenImage').width();
    var height = $('#hiddenImage').height();
    $('#hiddenImage').remove();
    var size = {
        width: width,
        height: height        
    };
    return size;
}
user_122958150
Related