Question

获取网站所有图像的列表听起来很简单。在Chrome中，您可以打开开发人员工具，打开＆＃34;应用程序＆＃34;选项卡，在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地图使用<canvas>并将这些图片直接渲染到画布中（使用drawImage方法），没有直接的img标签是DOM的一部分。

例如，看一下this fiddle，其中使用blob加载图像但注入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')返回一个空数组。

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

Answer 2

您需要通过

获取DOM中的所有图像

var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++){alert(images.getAttribute("src"));}

获取文档中所有图像的列表（包括blob）

2 个答案: