1

I try to find all images in a web page, add them in an array, check their dimensions and sort the array accordingly.

var images = document.getElementsByTagName("img");
var image_dimensions=[];
for(var i=0;i<images.length;i++){
    image_dimensions.push(images[i].width+"x"+images[i].height);
}

//var image_dimensions = ["45x67", "68x45", "12x23", "124x90"];

I want to sort the images according to their dimensions and update the images array. I tried to push dimensions into image_dimensions and sort it but later I could not figure out how can I relate the dimensions to the actual img nodes.

How can I sort the images in a web page by dimension?

Seixl
  • 33
  • 4

3 Answers3

3

From the comments you've made I think what you actually want to sort by is the total area of each image (height * width). You can do this by using the sort method with a custom compare function.

var sortedImgs,
  imgs = document.getElementsByTagName('img'); // returns a NodeList,
                                               // an array-like object

imgs = [].slice.call(imgs); // convert into a real array

sortedImgs = imgs.sort(function (a, b) {
  // Compute the area of each image
  var aArea = a.width * a.height,
    bArea = b.width * b.height;
  // compare the area of each
  return aArea - bArea;
});

The compare function subtracts the area of b from a and returns that value to the sort function:

  • If they have the same area this will return 0, telling sort they are equal
  • I If b is bigger than a, a negative number will be returned telling sort to sort a lower.
  • If a is bigger than b, a positive number will be returned telling sort to sort b lower.

Swaping aArea and bArea would flip those results, reversing the sort order.

The other answers have used clientWidth and clientHeight for some reason; clientWidth and clientHeight include any padding that might be on the element. (And as crazy as it is, images can have padding.) I used .width and .height, assuming you are interested in the actual dimensions of the image itself, not any styling that has been added to it.

Useless Code
  • 12,123
  • 5
  • 35
  • 40
  • As you pointed, I also thought multiplying width and height but there are some weird cases. Say `100x20` image is more meaningful than `1x3000` image, I suppose. So I am not sure which algorithm to use. Your other `clientWidth` point is correct so I changed it to `width`. But if someone adds `width="500"` attribute to an image tag, `img.width` becomes "500" even if the original image is `20px` wide. So it again might be calculated false as `clientWidth`. – Seixl Dec 16 '14 at 19:47
  • @Seixl Do you mean you need the original size of the image as saved? If so, you could use `naturalWidth/Height`, though it's not supported in IEs. – Teemu Dec 16 '14 at 20:14
  • @Teemu, yes `naturalWidth` did better for my case. Thanks. Your methodology works pretty good but `Useless Code` algorithm also have some logic in it. Can both methodology be combined in any way? – Seixl Dec 16 '14 at 20:40
  • Yes, when the imgs are zoomed, width X height is the zoomed size, must use naturalWidth X naturalHeight to get the original size ! – sonichy Feb 21 '19 at 05:01
0

You can use clientWidth and clientHeight property to find the dimension as described here ..After finding the dimensions you can use the function .sort() for the sorting stuff.

Please have a look at this link for the reference.

Community
  • 1
  • 1
Avinash Babu
  • 6,171
  • 3
  • 21
  • 26
0

Use a 2D array and include the image element too, something like this:

var images = document.getElementsByTagName('img');
var imageDimensions = [];
for(var i = 0; i < images.length; i++) {
    imageDimensions.push([images[i].clientWidth, images[i].clientHeight, images[i]]);
}

imageDimensions.sort(function (a, b) {
    if (a[0] - b[0] === 0) {
        return a[1] - b[1];
    }
    return a[0] - b[0];     
});

clientWidth/Height returns the size of the image as you can see on the page.

Result:

imageDimensions = [
    [width, height, HTMLImageElement],
    [width, height, HTMLImageElement],
                   :
]

And as adeneo has mentioned in a comment, you've to do this after the images have been fully loaded, put the code for example into window.onload event handler.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • looks great. But it is sorted smaller to bigger. how can I sort bigger to smaller style? – Seixl Dec 16 '14 at 16:39
  • For descending order just switch all `a`s and `b`s, i.e. `b[0]-a[0]` etc. – Teemu Dec 16 '14 at 16:40
  • Thanks. I will accept your answer. But this seems to sort according to width mainly, right? What happens if one image is `100x75` but the other is `95x200`? Which one should be regarded as bigger? – Seixl Dec 16 '14 at 16:51
  • The width is the primary term, `100x75` is considered bigger. If two equal widths are found, the code orders by height. – Teemu Dec 16 '14 at 16:54
  • @Seixl You can calculate area in my code using `a` and `b` too. The basic difference between these two algorithms is, that my code stores the size values for later use. In both cases you can apply aspect ratio or even the sum of squares to guide sorting. In my previous comment I erranously said IE not supporting `naturalWidth/Height`, they are supported in IE>8. – Teemu Dec 17 '14 at 05:17