Downloading blob image

Some websites have something like this:

<img src="blob:foo" alt="bar">

The "Save Image As" function in Firefox doesn't let me save the image blob:foo. I can't download the image by using "Save Page As" either. How can I download the image?

You just need to create your own element using the image source of the image you want to download, so as a basic example:

var image = document.querySelector('img');       // Image you want to save
var saveImg = document.createElement('a');       // New link we use to save it with
saveImg.href = image.src                         // Assign image src to our link target
saveImg.download = "imagename.jpg";              // set filename for download
saveImg.innerHTML = "Click to save image";       // Set link text
document.body.appendChild(saveImg);              // Add link to page

Now click the link and the image will download

If you open the Developer Tools of the browser, for example, F12 in Chrome. Switch to the Network view, check "Preserve log" and "Disable cache" and reload the page.

Find the resource of interest, if it helps you can filter to the type, e.g. Img, Media, etc. After clicking the resource you can click the Preview tab and save the resource from there.

Otherwise, I'm sure a tool such as Chrome Cache View - https://www.nirsoft.net/utils/chrome_cache_view.html would be able to help.