如何按维度对图像进行排序

How to Sort Images by Dimension

本文关键字：排序 图像 何按维      更新时间：2023-09-26

我尝试在网页中找到所有图像，将它们添加到数组中，检查它们的尺寸并相应地对数组进行排序。

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"];

我想根据图像的尺寸对图像进行排序并更新images数组。我试图将维度推入image_dimensions并对其进行排序，但后来我无法弄清楚如何将维度与实际的 img 节点相关联。

如何按维度对网页中的图像进行排序？

从您所做的评论中，我认为您真正想要排序的是每个图像的总面积(高度*宽度(。可以通过将 sort 方法与自定义比较函数一起使用来执行此操作。

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;
});

比较函数从a中减去b面积，并将该值返回给排序函数：

  • 如果它们具有相同的区域，这将返回0，告诉排序它们是相等
    • 的
  • 如果b大于a，将返回一个负数，告诉sort排序a更低。
  • 如果a大于b，将返回一个正数，告诉sort排序b更低。

交换aArea和bArea会翻转这些结果，反转排序顺序。

其他答案出于某种原因使用了clientWidth和clientHeight; clientWidth和clientHeight包括元素上可能存在的任何填充。(尽管很疯狂，但图像可以有填充。我使用了.width和.height，假设您对图像本身的实际尺寸感兴趣，而不是添加到其中的任何样式。

使用 2D 数组并包含图像元素，如下所示：

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返回您在页面上看到的图像大小。

结果：

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

正如 adeneo 在评论中提到的，您必须在图像完全加载后执行此操作，例如将代码放入window.onload事件处理程序中。

您可以使用

clientWidth和clientHeight属性来查找维度，如此处所述。找到尺寸后，您可以使用函数.sort()进行排序。

请查看此链接以供参考。

相关文章：