Find the dimensions of an image from bulk URLS

Question

Hello friends of StackOverflow!

I have a txt file with hundreds of web URLS that point to images. The images are all in JPG form.

I am trying to find out the dimensions of all the images in bulk without having to go through and inspect element on every single one of them. That would take hours. I thought about creating some sort of loop in javascript that reads the lines one by one but I am stumped. I do have a code that tells me the image dimensions but it doesn't perform the operation in bulk. I have to replace the URL of the image every time.

How would I go about this? It would be ideal if I had a piece of code (no language preference) that can read the txt file line by line and write the image dimensions corresponding to the line read in a new text file.

Here is my code so far: https://codepen.io/th3pr099/pen/XGVoMp

function getMeta(url, callback) {
var img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
getMeta(
"https://www.w3schools.com/w3css/img_lights.jpg",
function(width, height) { alert("Width: " + width + 'px ' + "Height: " 
+ height + 'px') }
);

Thank you so much for your help!

Possible duplicate of [How to use Javascript to read local text file and read line by line?](https://stackoverflow.com/questions/23331546/how-to-use-javascript-to-read-local-text-file-and-read-line-by-line) — icecub, Mar 14 '19 at 00:23

Lazerbeak12345 · Accepted Answer · 2019-03-14T00:53:23.037

0

Here's an idea, written in JavaScript (notice that it uses your getMeta function.):

<!doctype html>
<html>
  <body>
    Below is the textarea element that will take in the contents of your text file:<br />
    <textarea id="txtarea"></textarea>
    <button id="btn">Get image dimensions</button><br/><br/><br/>
    <script>
      //Your `getMeta` function goes below (I found that it works great)
      function getMeta(url, callback) {
      var img = new Image();
      img.src = url;
      img.onload = function() { callback(this.width, this.height); }
      }

      //When the button (id of "btn") is pressed,
      document.getElementById("btn").onclick=function() {
        //Get the value of the textarea, then split it on newlines
        var listOfLinks=document.getElementById("txtarea").value.split("\n");
        //iterate through each line
        for (var i=0;i<listOfLinks.length;i++) {
          //run your `getMeta` function to get width and height
          getMeta(listOfLinks[i],function(w,h) {
            //Append data to body
            document.body.innerHTML+="Image Dementions: ("+w+","+h+")<br />";
          });
        }
      };
    </script>
  </body>
</html>

edited Mar 14 '19 at 00:53

answered Mar 14 '19 at 00:47

Lazerbeak12345

309
4
19

Thank you for commenting! When save your code into an HTML file and run it, I get no results. I put a test URL in the textarea you made and then I clicked get dimensions. However, nothing happens. Here is the test URL I used: https://www.w3schools.com/css/paris.jpg – Th3pr09X0R Mar 14 '19 at 00:56
@Th3pr09X0R I modified it not long before your comment. It seems to be working fine now, assuming that each link is on a separate line. – Lazerbeak12345 Mar 14 '19 at 01:35
@Th3pr09X0R There are a few things that must be remembered about `img.onload`: There is a small delay time as the image is downloaded from the URL, and also, the function will only be called once per URL – Lazerbeak12345 Mar 14 '19 at 01:44
Excellent method. Thank you so much! – Th3pr09X0R Mar 14 '19 at 02:16

Find the dimensions of an image from bulk URLS

1 Answers1