如何使用XPCOM检索网页中存在的图像(如果可能，则进行解码)

Question

如果可能的话，解码后，如何通过XPCOM在网页上获取所有图像？

图像可以在 HTML 中指定为某些 CSS 属性中的背景 URL、img 标记内或 Web 开发人员可能包含的任何形式。

我尝试研究imgIContainer，imgIDecodeObserver和许多其他接口。尽管有一种方法我们可以向Mozilla提供图像URI，以便它加载图像，对其进行解码并返回imgIContainer。但是无论如何我都找不到当前网页中的所有图像。

这必须在Java或Javascript中完成。

有什么建议吗？

---

@Wladimir - 感谢您的帮助。

我想要所有图像，包括CSS结构(背景图像(。所以现在我正在收听来自nsIWebProgressListener的事件。

    onStateChange: function(webProgress, request, stateFlags, status) {
        if ((~stateFlags & (nsIWebProgressListener.STATE_IS_REQUEST | nsIWebProgressListener.STATE_STOP)) == 0) {
            var imgReq = request.QueryInterface(CI.imgIRequest);
            if (imgReq)
                var img = imgReq.image;
        }
    }

问题是request.QueryInterface(CI.imgIRequest)为所有非图像请求抛出异常。尽管可以通过将代码放在 try-catch 块中来忽略这些异常，但我更喜欢干净利落地做事。

是否有任何条件可以检查以了解请求是否用于图像？

Answer 1

您可以查看现有的代码。"页面信息"对话框有一个"媒体"选项卡，可成功显示页面上的大多数图像。重要的函数在pageInfo.js中grabAll()，它被调用为每个元素(通过树行者(。如您所见，没有通用的方法来获取图像，此函数而是使用window.getComputedStyle()来提取此元素的一堆CSS属性的值：background-image，border-image，list-style-image，cursor。它还将查找<img>、<svg:image>、<link>(favicon(、<input>、<button>、<object>和<embed>标签。但是，它无法识别所有内容，例如，这些CSS结构将无法识别：

.foo:before
{
  content: url(image.png);
}
.foo:hover
{
  background-image: url(image.png);
}

尽管如此，这可能是你能得到的 - 除非你想在网页加载时查看它发出的请求。

编辑：如果在执行请求时查看请求(通过 Web 进度侦听器(，则可以执行以下操作：

if (request instanceof CI.imgIRequest)
  var img = request.URI.spec;

请注意，request.image不会对您有太大帮助，几乎所有imgIContainer方法都只能从本机代码访问。