Dealing with blob URLs for images in automation

replace_image_url.js

# This code can be executed in selenium via a javascript executor.  It will change the source of an image that uses a blob to a data url instead
# You will need to supply the ID of the image tag, or change to code to look it up some other way.

# This line needs changed / passed in
var image = document.getElementById(YOUR_IMAGE_ID);

var blobUrl = image.src;
var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;
   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     image.src = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send()

return_a_usable_url.js

# This code can be executed in selenium via a javascript executor.  It will return a URL that can be downloaded to a file.
# You will need to supply the blobl url for the image below

# This line needs changed / passed in
var blobUrl = IMAGE_BLOB_URL_HERE;

var response = await new Promise(resolve => {
	var xhr = new XMLHttpRequest();
	xhr.responseType = 'blob';
	xhr.open("GET", blobUrl);
	xhr.onload = function(e) {
		var recoveredBlob = xhr.response;
		var reader = new FileReader;
		reader.onload = function() {
			var blobAsDataUrl = reader.result;
			resolve(blobAsDataUrl);
		};
		reader.readAsDataURL(recoveredBlob);
   };
   
   xhr.onerror = function () {
     resolve(undefined);
     console.error("** An error occurred during the XMLHttpRequest");
   };
   xhr.send();
})