-3

I have after creating this test for a future project come across a task that I am unable to solve and after looking across the Internet cannot seem to find an answer that:

  • I understand due to lack of knowledge of Javascript
  • Does not seem to work with my layout of code

I would like to allow us to work out the width and height (in pixels) of an uploaded image, and then show it replacing the contents of an HTML element.

My code is copied here: https://jsfiddle.net/op4sy5g8/

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
louisdev
  • 5
  • 6
  • `element.clientWidth;` and `element.clientHeight;`. This will give you the width and height in pixels. And based on a `file`, https://stackoverflow.com/questions/7460272/getting-image-dimensions-using-javascript-file-api – Martin Nov 20 '21 at 19:30
  • Does this answer your question? [Getting Image Dimensions using Javascript File API](https://stackoverflow.com/questions/7460272/getting-image-dimensions-using-javascript-file-api) – Martin Nov 20 '21 at 19:34
  • @Martin thanks for your reply, I have previously looked at this thread but I could not find how to implement into my code. – louisdev Nov 20 '21 at 19:53
  • Do you just want to output the dimensions or do you need to display the image on screen? – skara9 Nov 20 '21 at 21:06
  • Questions that are just a bit more than a link to a website/external source are off-topic here. The reason is that when a link gets obsolete, the question is no longer useful to future readers. We are trying to build a lasting repository of useful question/answer pairs here. Please read [**Something in my web site or project doesn't work. Can I just paste a link to it?**](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) as well as how to use this site in general [**taking the tour**](http://stackoverflow.com/tour) – Vickel Nov 21 '21 at 00:04
  • @skara9 I would like to be able to display the dimensions of the image into some HTML text – louisdev Nov 21 '21 at 06:58

1 Answers1

1

If you want to get the dimensions of the image you can use:

const url = URL.createObjectURL(<File>);
const img = new Image();
img.onload = () => {
  // The dimensions will be img.width and img.height
  URL.revokeObjectURL(url);
}
img.src = url;
skara9
  • 4,042
  • 1
  • 6
  • 21