文書内のすべての画像のリストを取得する（ブロブを含む）

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

あなたが使用して（あなたがdocument.getElementsByTagName("img")でそれらimgのタグを取得していない理由は、Googleマップが<canvas>を使用しているためであるとキャンバスに直接それらの画像をレンダリングする

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

Answer 2

してDOM内のすべての画像を取得する必要がありますdrawImageメソッド）、DOMの一部である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"/>

：たとえば

はイメージがBLOBを使用してロードされますが、imgタグ（このケースでは、あなたが成功しdocument.getElementsByTagName("img")を使用してそれらを取得することができます）に注入されているthis fiddleを見てみましょう

この場合、DOMの一部である画像要素をループし、srcプロパティを表示できます。 document.querySelectorAll('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 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" />

：

は今<canvas>要素を使用しています。一方the approach that Google Mapsで見てみましょうアレイ。

残念ながら、既存のキャンバスに既に描画されている画像をどのように抽出できるかはわかりません。