在 html 页面中使用 Javascript 检测所有图像

Question

我正在编写一个 chrome 扩展程序，我正在尝试检测网页中的所有图像。

我正在尝试在我的 JS 代码中检测网页上的所有图像，我的意思是：

1. 网页加载后加载的图片
2. 用作背景的图像（在 CSS 或内联 html 中）
3. 可以在网页加载完成后加载的图片，例如，在进行 google 图片搜索时，很容易找到所有图片，但是一旦您单击一张图片将其放大，则无法检测到该图片。浏览社交媒体网站也是如此。

我现在拥有的代码可以很容易地找到初始图像 (1)。但我在其他两个部分 (2) 和 (3) 中挣扎。

这是我当前在 contentScript.js 中的代码：

var images = document.getElementsByTagName('img');
for (var i = 0, l = images.length; i < l; i++) {
    //Do something
}

我应该如何修改它，以便它实际上可以检测到所有其他图像（2 和 3）。

我在 SO 上看到了几个关于 (2) 的问题，例如 this one 或 this one，但似乎没有一个答案完全满足我的第二个要求，而且没有一个是关于第三个要求的。

Answer 1

即时图片集

正如@vsync 所说，查找所有HTML 图像就像var images = document.images 一样简单。这将是一个实时列表，因此从页面中动态添加或删除的任何图像都将自动反映在列表中。

提取背景图片（内联和 CSS）

有几种方法可以检查背景图像，但也许最可靠的方法是遍历所有页面元素并使用window.getComputedStyle 检查每个元素的backgroundImage 是否不等于none。这将获得内联和 CSS 设置的背景图像。

var images = [];
var elements = document.body.getElementsByTagName("*");
Array.prototype.forEach.call( elements, function ( el ) {
    var style = window.getComputedStyle( el, false );
    if ( style.backgroundImage != "none" ) {
        images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "")
    }
}

从window.getComputedStyle 获取背景图像将返回完整的CSS background-image 属性，格式为url(...)，因此您需要删除url( 和)。您还需要删除 URL 周围的所有 " 或 '。您可以使用 backgroundImage.slice( 4, -1 ).replace(/['"]/g, "")

来完成此操作

只有在 DOM 准备好后才开始检查，否则您的初始扫描可能会丢失元素。

动态添加的背景图片

这不会提供实时列表，因此您需要MutationObserver 来观看文档，并检查任何更改的元素是否存在backgroundImage。

在配置观察者时，确保您的 MutationObserver 配置将 childList 和 subtree 设置为 true。这意味着它可以监视指定元素的所有子元素（在您的情况下为 body）。

var body = document.body;
var callback = function( mutationsList, observer ){
    for( var mutation of mutationsList ) {
        if ( mutation.type == 'childList' ) {
            // all changed children are in mutation.target.children
            // so iterate over them as in the code sample above
        }
    }
}
var observer = new MutationObserver( callback );
var config = { characterData: true,
            attributes: false,
            childList: true,
            subtree: true };
observer.observe( body, config );

由于搜索背景图片需要检查 DOM 中的每个元素，因此您不妨同时检查 <img>s，而不是使用 document.images。

代码

您可能希望修改上面的代码，以便除了检查它是否有背景图像之外，还要检查它的标签名称是否为IMG。您还应该将它放在一个在 DOM 准备好时运行的函数中。

更新：为了区分图像和背景图像，您可以将它们推送到不同的数组，例如 images 和 bg_images。要同时识别图像的父级，您可以将image.parentNode 推送到第三个数组，例如image_parents。

var images = [],
    bg_images = [],
    image_parents = [];
document.addEventListener('DOMContentLoaded', function () {
    var body = document.body;
    var elements = document.body.getElementsByTagName("*");

    /* When the DOM is ready find all the images and background images
        initially loaded */
    Array.prototype.forEach.call( elements, function ( el ) {
        var style = window.getComputedStyle( el, false );
        if ( el.tagName === "IMG" ) {
            images.push( el.src ); // save image src
            image_parents.push( el.parentNode ); // save image parent

        } else if ( style.backgroundImage != "none" ) {
            bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
        }
    }

    /* MutationObserver callback to add images when the body changes */
    var callback = function( mutationsList, observer ){
        for( var mutation of mutationsList ) {
            if ( mutation.type == 'childList' ) {
                Array.prototype.forEach.call( mutation.target.children, function ( child ) {
                    var style = child.currentStyle || window.getComputedStyle(child, false);
                    if ( child.tagName === "IMG" ) {
                        images.push( child.src ); // save image src
                        image_parents.push( child.parentNode ); // save image parent
                    } else if ( style.backgroundImage != "none" ) {
                        bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
                    }
                } );
            }
        }
    }
    var observer = new MutationObserver( callback );
    var config = { characterData: true,
                attributes: false,
                childList: true,
                subtree: true };

    observer.observe( body, config );
});

Answer 2

对于 HTML 图像（运行时已经存在）：

document.images

---

对于 CSS 图像：

您可能需要在页面的 CSS（内联文件或外部文件）上使用 REGEX，但这很棘手，因为您需要从相对路径中动态构建完整路径，而这可能并不总是有效。

Getting all css used in html file

---

对于延迟加载的图片：

您可以使用突变观察者，就像@filip 在他的回答中建议的那样

Answer 3

这应该可以解决您的 3. 问题。我用了MutationObserver。

我会检查targetNode 的更改并添加回调，如果发生更改。

对于您的情况，targetNode 应该是检查整个文档更改的根元素。

在回调中，我询问突变是否添加了带有“IMG”标签的节点。

    const targetNode = document.getElementById("root");

    // Options for the observer (which mutations to observe)
    let config = { attributes: true, childList: true, subtree: true };

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
        for(let mutation of mutationsList) {
            if (mutation.addedNodes[0].tagName==="IMG") {
                console.log("New Image added in DOM!");
            }   
        }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);