我目前正在构建web浏览器扩展-有点像Imagus，我对它如何为任何给定的IMG元素获得全尺寸的图像链接感兴趣。
我在这个问题中发现了一些有用的信息，但我不知道如何使用普通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和sizes，它们提供了一些灵活的方式来提供图像。但是，如果不检查所有图像并进行拾取，就无法判断图像的实际分辨率。
srcset是一个逗号分隔的URL字符串，可选地带有空白和媒体查询lite描述符(类似于some-url.png 1x(。媒体查询lite描述符不会告诉你图像的分辨率，所以你可以放弃它，获得URL。
const imageSources = [...document.querySelectorAll('img')]
.map(imageElement => imageElement.srcset.split(',')
.map(s => s.split(' ')[0]);
sizes是对srcset的赞扬，可能会告诉你与srcset链接的图像的大小，但是，它并不是严格链接的，所以如果你关心实际可用的最高分辨率，而不仅仅是页面上说的可用最高分辨率，你可以忽略这一点。如果你想信任它，它们是一个逗号分隔的媒体查询列表，与逗号分隔的srcset列表并行。不过，分析媒体查询比我现在更愿意深入研究的内容。
最后，您有了<picture>元素，它有一个或多个<source>元素，每个元素都有一个srcset和sizes，就像上面一样，还有一个<img>元素。你也会得到同样的每一个。
现在，把所有这些放在一起，这样你就只能得到每个的一份副本，你可以做这样的事情：
// picture > * gets all the sources and img in a picture
// :not(picture) img gets all the img tags not inside a picture, or else we'd have duplicates
const imageSets = [...document.querySelectorAll('picture > *, :not(picture) img')]
.map(element => [
element.src,
...(element.srcset ?? '')
.split(',')
.map(s => s.split(' ')[0])
].filter(Boolean)); // filter filters out any empty strings
这将为您提供一个数组数组，每个图像都有一个或多个可能的URL。然后，您可以对其中的每一个进行循环，并使用任何您想要的逻辑(比如加载每个图像并选择实际最大的图像，或者尝试从URL中解析分辨率(来为页面上的每个图像选择最大的图像。