有没有办法在 Javascript 中选择所有特定大小的图像？ [关闭]

Question

我想选择网页上大于特定尺寸（例如 200 x 200 像素）的所有图像。有没有办法在 Javascript 中做到这一点？

Answer 1

试试这个。

let img = document.querySelectorAll('img'),
  len = img.length,
  counter = 0;

[].forEach.call(img, function(img) {
  img.addEventListener('load', () => {
    counter++;
    if (counter === len) {
      console.log('all images loaded at ' + new Date().toLocaleTimeString());
      check(); // call automatically without user interaction
    }
  }, false);
});

check(); // just to show it works only after all image loads

function check(size) {
  if (counter !== len) {
    console.log('waiting for images to load at ' + new Date().toLocaleTimeString());
    return;
  }
  let result = {};
  img.forEach(e => {
    if (!result[e.naturalHeight + 'x' + e.naturalWidth]) {
      result[e.naturalHeight + 'x' + e.naturalWidth] = [];
    }
    if (size && e.naturalHeight >= size && e.naturalWidth >= size) {
      result[e.naturalHeight + 'x' + e.naturalWidth].push(e.src);
    } else if (typeof(size) == 'undefined') {
      result[e.naturalHeight + 'x' + e.naturalWidth].push(e.src);
    }
  });
  console.log(result);
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}

img {
  max-width: 100%;
}

<button onclick="check()">Check Size</button>
<button onclick="check(600)">Check Size > 600</button>
<div class="container">
  <img src="https://dummyimage.com/400x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/400x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x600/000/fff" />
</div>