Mendapatkan daftar semua gambar situs web terdengar mudah. Di Chrome Anda dapat membuka alat pengembang, buka tab "Aplikasi" dan di bawah Frames > top > Images Anda melihat daftar semua gambar. Dalam kode ini harus sesuatu yang mirip dengan:

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

Masalahnya: ketika Anda membuka mis. Google Maps Anda akan melihat beberapa gambar memiliki src seperti blob:https://www.google.de/65ce9e40-01bd-4ec7-ad85-6f0ead2497d8. Perhatikan awalan blob. AFAIU mereka dibuat secara internal dan tidak dimuat dari jaringan seperti itu.

Pertanyaannya adalah - bagaimana seseorang masih bisa mengaksesnya?

0
tcurdt 20 Agustus 2017, 14:25

2 jawaban

Jawaban Terbaik

Alasan mengapa Anda tidak mendapatkan tag img tersebut dengan document.getElementsByTagName("img") adalah karena Google Maps menggunakan <canvas> dan merender gambar tersebut langsung ke kanvas (menggunakan drawImage metode), tidak ada tag img langsung yang merupakan bagian dari DOM.

Misalnya, lihat this fiddle di mana gambar dimuat menggunakan blob tetapi disuntikkan ke dalam tag img (dalam hal ini Anda berhasil mendapatkannya menggunakan 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"/>

Dalam hal ini kita dapat berhasil mengulang elemen gambar yang merupakan bagian dari DOM dan menampilkan properti src-nya.

Sekarang lihat di sisi lain the approach that Google Maps digunakan dengan <canvas> elemen:

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" />

Seperti yang Anda lihat dalam kasus ini tidak ada yang dicetak ke konsol karena document.querySelectorAll('img') mengembalikan array kosong.

Sayangnya saya tidak begitu yakin bagaimana Anda dapat mengekstrak gambar yang telah digambar ke dalam kanvas yang ada.

1
Darin Dimitrov 20 Agustus 2017, 17:34

Anda perlu mendapatkan semua gambar di DOM Anda dengan

var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++){alert(images.getAttribute("src"));}
0
Mathe Eliel 20 Agustus 2017, 11:28