asked on

Obtain image size prior to display

hi,

How can i obtain the dimensions of a jpg image before displaying it on the page?

For example:

https://gardeners.s3.amazonaws.com/p/VECAR32733_3.jpg

I want to use the dimension info to display the image with a certain surface area, so I would need to know the aspect ratio first.

For example, what is the code to display the image with an area of say 160k pixels ?

Thanks

Paul Sauvé

as you can see from the tab when you open the image, it is 720 pixels x 720 pixels:

David Johnson, CD

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

Open in new window

or use this complete solution
https://codepen.io/davidelrizzo/pen/vmIly

xenium

ASKER

hi David,

Many thanks.

The URL will be embedded into the HTML code (generated from a database)

What would be the code to display the example URL above and display it at 160,000 pixels? (in this example it would be 400x400, but the size would vary with a different URL)

Thanks

xenium

ASKER

The following is wrong but gives an idea what I'm trying to do:

<script>
var img = new Image();

// load "https://gardeners.s3.amazonaws.com/p/VECAR32733_3.jpg"
//......

img.onload = function(){
  var height = img.height;
  var width = img.width;

  var target_area = 160000;
  var aspect_ratio = height / width;
	
  var new_width = sqrt(target_area/aspect_ratio);
  var new_height = aspect_ratio * new_width;
  
  // code here to use the dimensions
  /// how to replace the dimensions below with the new ones above

}

img.src = url;

</script>

<IMG src="https://gardeners.s3.amazonaws.com/p/VECAR32733_3.jpg" width=300 height=300>

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.