javascript - 如何从 srcset 中确定最高分辨率图像

Question

假设我有一张图片

<img srcset="large.jpg 1400w, medium.jpg 700w, small.jpg 400w"
     sizes="(min-width: 700px) 700px, 100vw"
     alt="A woman reading">

现在这也可以是

这样的格式

<img srcset="large.jpg 2x, medium.jpg 1.3x, small.jpg 0.8x"
     sizes="(min-width: 700px) 700px, 100vw"
     alt="A woman reading">

此外，(不是有效的 HTML)

<img srcset="large.jpg 1400w, medium.jpg 1.3x, small.jpg 0.8x"
     sizes="(min-width: 700px) 700px, 100vw"
     alt="A woman reading">

<罢工>
现在我如何提取具有最高分辨率图像的 URL。
我想拆分 srcset 然后提取大小，但问题是大小可以在 1200w 中格式或 2x格式或两者兼而有之，我不知道如何区分这是否是 1200w格式或 2x格式，即使我确实知道是什么，我如何比较它们以确定最大尺寸。

我希望我能展示我尝试过的东西，但我没有想到如何做到这一点!

Answer 1

这是我用的:

static getHighestResImg(element) {
  if (element.getAttribute("srcset")) {
    return element
      .getAttribute("srcset")
      .split(",")
      .reduce(
        (acc, item) => {
          let [url, width] = item.trim().split(" ");
          width = parseInt(width);
          if (width > acc.width) return { width, url };
          return acc;
        },
        { width: 0, url: "" }
      ).url;
  }

  return element.getAttribute("src");
}