How to read an image from the localhost url and get its width and height in javascript

user_13197161 0
Viewed 208

Hey guys I am new to javascript and react, I want to get the image's width and height when its loaded from the image url. How to do it? Help would be much appreciated.

I know it starts with this but doesn't really understand how to continue..

const imageDimension = (img) => {
   let reader = new FileReader();
   

}

Thanks

reactjs html jquery javascript
2 Answers

You can use the load event:

const image = new Image();

image.addEventListener('load', () => {
  console.log('image height', image.height);
  console.log('image width', image.width);
})

image.src = 'http://localhost/image.png'
user_4923250

The "load" event listener works if the image is going to be loaded in the browser.

However, if that is not the case, and you really don't want the image to be visible then you could do this.

const getImageDimension = (imgUrl) => {
  const img = new Image();
  
  // set some styles to hide the img
  img.src = imgUrl;
  img.style.left = -9999;
  img.style.position = 'absolute';
  img.style.visibility = 'hidden';
  
  // inject it into the page
  document.body.appendChild(img);

  // resolve when image has been injected and
  // img.height and width is available
  return new Promise((resolve) => {
    const interval = setInterval(() => {
      const height = img.naturalHeight;
      const width = img.naturalWidth;

      if (height && width) {
        clearInterval(interval);
        document.body.removeChild(img);
        resolve({
          height,
          width,
        })
      }
    })
  })
}

const SAMPLE_IMAGE = "https://asia.olympus-imaging.com/content/000107507.jpg";

getImageDimension(SAMPLE_IMAGE)
.then((dimension) => console.log(dimension))
user_55894050
Related