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

Question

Getting a list of all images of a website sounds easy. In Chrome you can open the developer tools, open the "Application" tab and under Frames > top > Images you see a list of all images. In code this should be something similar to:

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

The problem: when you open e.g. Google Maps you'll notice some images have a src like blob:https://www.google.de/65ce9e40-01bd-4ec7-ad85-6f0ead2497d8. Notice the blob prefix. AFAIU they are internally created and not loaded from the network as such.

The question is - how can one still get access to them?

Darin Dimitrov · Accepted Answer · 2017-08-20 17:34:43Z

1

The reason why you are not getting those img tags with document.getElementsByTagName("img") is because Google Maps uses a <canvas> and renders those images directly into the canvas (using the drawImage method), there are no direct img tags that are part of the DOM.

For example take a look at this fiddle in which the images are loaded using a blob but injected into an img tag (in this case you can successfully get 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 this case we can successfully loop through the image elements that are part of the DOM and display their src property.

Now take a look on the other hand the approach that Google Maps uses with a <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 you can see in this case nothing gets printed into the console because document.querySelectorAll('img') returns an empty array.

Unfortunately I am not quite sure how you can extract the images that have already been drawn into an existing canvas.

answered Aug 20, 2017 at 17:34

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tcurdt Over a year ago

Good analysis. While they are available through the Developer Tools that doesn't necessarily mean they need to be accessible from javascript.

Darin Dimitrov Over a year ago

They are available through the Developer Tools because the images have been fetched through an AJAX request to the server, but the result of this request hasn't been added to an <img> tag but rather to a <canvas> element.

Mathe Eliel · Accepted Answer · 2017-08-20 11:28:53Z

0

You need to get all images in your DOM by

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

answered Aug 20, 2017 at 11:28

Mathe Eliel

7782 gold badges8 silver badges20 bronze badges

1 Comment

tcurdt Over a year ago

I assume you mean

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

but no - that doesn't fly.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related