Javascript 如何获取页面上任何图像的高分辨率url？

我目前正在构建web浏览器扩展——有点像，我对它如何为任何给定的IMG元素获取全尺寸图像链接感兴趣

我在中找到了一些有用的信息，但不知道如何使用vanilla JavaScript实现它，也不知道如何让它在尽可能多的页面上工作

---

如果有人能提供简单的脚本就太好了，在给定IMG元素或src url的情况下，它将提供尽可能高的图像分辨率的链接。

因此，一些网站可能会实施一种方案，其中他们有多个url来获取不同分辨率的图像（比如

/some image/400x300.png

和

/some image/800x600.png

），没有一个标准，所以不能以通用方式编写

通常，只要抓住

img

元素的

src

属性，您就会陷入困境。您可以像这样获得所有属性：

const imageSources = [...document.querySelectorAll('img')].map(imageElement => imageElement.src);

还有

srcset

和

size

提供了一些灵活的方式来提供图像。但是，如果不全部检查并选择它们，就无法判断图像的实际分辨率

srcset

是一个逗号分隔的url字符串，可以选择带有空格和媒体查询精简描述符（如

some-url.png 1x

）。媒体查询精简描述符不会告诉您图像的分辨率，因此您可以放弃该选项并获取url

const imageSources = [...document.querySelectorAll('img')]
  .map(imageElement => imageElement.srcset.split(',')
  .map(s => s.split(' ')[0]);

size

是对

srcset

的一种补充，它可能会告诉您与

srcset

链接的图像的大小，但是，它不是严格链接的，因此如果您关心实际可用的最高分辨率，而不仅仅是页面所说的可用的最高分辨率，您可以忽略这一点。如果您想信任它，它们是一个comma分隔的媒体查询列表，与逗号分隔的

srcset

列表并行。不过，解析媒体查询超出了我现在的兴趣范围

最后，您有

元素，它有一个或多个

元素，每个元素都有一个

srcset

和

size

，就像上面一样，还有一个

元素。对于每个元素，您都会得到相同的结果

现在，把它们放在一起，这样你就只得到一份副本，你可以这样做：

const imageSources = [...document.querySelectorAll('img')].map(imageElement => imageElement.src);

---

这将为您提供一个数组，每个图像都有一个或多个可能的URL。然后，您可以在每个数组上循环，并使用您想要的任何逻辑（例如加载每个数组并选择实际最大的数组，或者尝试解析URL的解析）为页面上的每个图像选择最大值。

谢谢您的回答！我刚刚尝试在Reddit提要上运行您的代码，但最终收到了文档。querySelectorAll（…）.map不是函数。抱歉，应该是

[…document.querySelectorAll（…）].map（）

querySelectorAll（）

返回一个没有

映射（）的
节点列表
直接，所以我们必须将其转换为数组。谢谢！我刚刚尝试过，但它会返回每个图像的唯一URL列表。似乎服务器返回的是已经裁剪过的图像，没有提供srcset-就像这样：正如我提到的，每个服务器都是不同的。无法神奇地知道可用的最大图像是什么。如果如果你正在抓取一些特定的东西，你将不得不特别关注他们如何编写网站代码并采取相应的行动。例如，包装图像的链接可能具有更高的分辨率版本。但这类内容不能以通用方式完成。如果你有更具体的问题，你应该问得更具体。我现在回答了通用版本。好的，谢谢-这肯定说明了方向