javascript - 获取文档中所有图像的列表(包括 blob)

Question

获取网站所有图像的列表听起来很容易。在 Chrome 中，您可以打开开发人员工具，打开“应用程序”选项卡，然后在Frames > top > Images下您会看到所有图像的列表。在代码中，这应该类似于:

for(var i = 0; i< document.images.length; i++){ console.log(document.images[i].src) }

问题:当你打开例如Google Maps你会注意到一些图像有 src喜欢 blob:https://www.google.de/65ce9e40-01bd-4ec7-ad85-6f0ead2497d8 。请注意blob字首。 AFAIU 它们是内部创建的，而不是从网络加载的。

问题是 - 如何才能访问它们？

Answer 1

您没有得到这些的原因img标签为 document.getElementsByTagName("img")是因为 Google map 使用 <canvas>并将这些图像直接渲染到 Canvas 中(使用 drawImage 方法)，没有属于 DOM 的直接 img 标签。

例如，看看 this fiddle 其中图像使用 blob 加载，但注入(inject)到 img 标签中(在这种情况下，您可以使用 document.getElementsByTagName("img") 成功获取它们):

var xhr = new XMLHttpRequest();
xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true );

xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#photo" );
    img.src = imageUrl;
    
    var images = document.querySelectorAll('img');
    for(var i=0; i<images.length; i++) { 
        console.log(images[i].src); 
    }   
};

xhr.send();

<img id="photo"/>

在这种情况下，我们可以成功循环遍历属于 DOM 的图像元素并显示它们的 src 属性。

现在看看另一方面 the approach that Google Maps 与 <canvas> 一起使用元素:

var xhr = new XMLHttpRequest();

xhr.open( "GET", "https://fiddle.jshell.net/img/logo.png", true );

xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.onload = function() {
        context.drawImage(img, 0, 0);
    };
    img.src = imageUrl;
    
    var images = document.querySelectorAll('img');
    for(var i=0; i<images.length; i++) { 
        console.log(images[i].src); 
    }    
};

xhr.send();

<canvas id="myCanvas" />

正如您所看到的，在这种情况下，控制台中没有打印任何内容，因为 document.querySelectorAll('img')返回一个空数组。

不幸的是，我不太确定如何提取已绘制到现有 Canvas 中的图像。