javascript - getting a list of all images in a document (including blobs) -

getting list of images of website sounds easy. in chrome can open developer tools, open "application" tab , under frames > top > images see list of images. in code should similar to:

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

the problem: when open e.g. google maps you'll notice images have src blob:https://www.google.de/65ce9e40-01bd-4ec7-ad85-6f0ead2497d8. notice blob prefix. afaiu internally created , not loaded network such.

the question - how can 1 still access them?

the reason why not getting img tags document.getelementsbytagname("img") because google maps uses <canvas> , renders images directly canvas (using drawimage method), there no direct img tags part of dom.

for example take @ this fiddle in images loaded using blob injected img tag (in case can them using 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"/>

in case can loop through image elements part of dom , display src property.

now take on other hand the approach google maps uses <canvas> element:

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

as can see in case nothing gets printed console because document.queryselectorall('img') returns empty array.

unfortunately not quite sure how can extract images have been drawn existing canvas.