1

I am creating a website to share wallpapers that can be downloaded and used on users' desktops. But I am not able to find a way to show its resolution to my visitors. Yes, I can write the resolution myself, but the problem is that I share too many images and it is not possible for me to write resolution for each image.

I am able to automatically create description but I want to show the image resolution.

Is it possible with JavaScript to achieve this? No problem if it shows the result after the image loads.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Ashish
  • 13
  • 2
  • I suggest http://stackoverflow.com/questions/2179100/get-image-height-and-width-as-integer-values – mplungjan Oct 15 '14 at 15:08
  • This is PHP, and OP asks for Javascript. But I believe that this can't be achieved client-side without loading all images (which is a big issue) – yunandtidus Oct 15 '14 at 15:10
  • Yup. To read the dimensions client-side, you will need to load each of the images. A more performant option, is to pass the image URL to the server via ajax, calculate the dimensions and cache the results, before passing it to client. – levi Oct 15 '14 at 15:12

1 Answers1

0

You can create it as an img element in JavaScript without rendering it on your page:

var img = document.createElement('img');

img.src = "path_to_src";

Now your image is created, you can pull the height and width using img.height and img.width, which are obtained once the image loads:

var x = document.createElement('img');

x.src = "http://placehold.it/128x256";

x.onload = function() {
  var html = "";
  
  html += "Height = " + x.height + "px<br>";
  html += "Width = " + x.width + "px";
  
  document.querySelector('p').innerHTML = html;
}
<p>
    <!-- Image height and width will be displayed here instead of the below text. -->
    Creating image and pulling its height and width...
</p>
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 1
    after load I would imagine and how expensive would that be on the client to have to download the full image to see the resolution? – mplungjan Oct 15 '14 at 15:06
  • @mplungjan you don't seem to need to handle that on Chrome. Not sure about other browsers though. I've added an `onload` handler, regardless. – James Donnelly Oct 15 '14 at 15:07
  • @mplungjan The issue is that the natural dimensions of the images may be inaccessible until the file is completely loaded. – Terry Oct 15 '14 at 15:14
  • you can verify that the entire image is being loaded, by checking the dev-tools network tab. – levi Oct 15 '14 at 15:15
  • It worked... but the result (width and height) are appeared in the first

    tag and not in the one I want it to appear.

     – Ashish Oct 15 '14 at 15:19
  • @Ashish Then just change the `querySelector` to your selector of interest. – Terry Oct 15 '14 at 15:21
  • @Ashish I only added that in to easily display that the values had been pulled within the StackOverflow code snippet. – James Donnelly Oct 15 '14 at 15:22
  • Thanks... I changed query selector from "p" to "pt". Does this have any problem?. Also, I am able to get the result I want by changing query selector. – Ashish Oct 15 '14 at 15:25
  • @Ashish `pt` isn't a valid HTML element. What are you wanting to achieve? – James Donnelly Oct 15 '14 at 15:27
  • Actually... when I used the code it showed the resolution perfectly but not at the correct place. I want to add it on specific paragraph. The resolution of the images are shown in the first paragraph of my site. – Ashish Oct 15 '14 at 15:31
  • @Ashish take a look at how `querySelector` works: https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector. My answer here answers the question you've asked. If you have troubles with `querySelector` I suggest you ask a new question and provide any relevant HTML. If you believe my answer has helped, please could you mark it as the accepted answer so that it can be closed? Thanks! – James Donnelly Oct 15 '14 at 15:33
  • Thanks! Now working very well... Give the paragraph an ID and use that ID in the querySelector. – Ashish Oct 15 '14 at 15:39
  • @Terry yes, I know. Hence my suggestion to use the PHP instead – mplungjan Oct 15 '14 at 16:09