13

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?

8
  • Some pages protect the source, you may need to give us specific references. Fairly random ref from a photography site I'm a member of... viewbug.com/contests/travel-photography-project/81413133 You can view it but you can't 'get ' it, quite intentionally.
    – Tetsujin
    Oct 6, 2018 at 18:49
  • there is no generic solution, you will have to provide a specific example
    – Albin
    Oct 6, 2018 at 18:52
  • 1
    Of course there is a generic solution
    – miknik
    Oct 6, 2018 at 19:09
  • @miknik So provide an answer ...
    – DavidPostill
    Oct 6, 2018 at 19:16
  • @DavidPostill Give me a chance :)
    – miknik
    Oct 6, 2018 at 19:18

5 Answers 5

16

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

2
  • That works perfectly, just copy and paste. Thank you Aug 16, 2019 at 13:22
  • 1
    Great thought! Also note that it is also able to just call saveImg.click() without adding it to DOM.
    – Sherry869
    Feb 16, 2021 at 9:32
3

"Search by Image" extension

One simple solution for downloading a blob image is to use the Search by Image extension by Armin Sebastian. Search by Image → Open Image will show the blob in a new tab. Right-click that image and choose Save Image As… to save it to a file.

That's all you need, but read on if you'd like to see an example.

Example

This 1797 sketch by Francisco de Goya is served by Google as tiled data blobs. Each tile is simply a 512x512 PNG image, but normal methods of saving them fail.

Step 1

With the Search by Image extension, use the context menu¹ and choose Search by Image's "Open Image" option.

    Context menu with Open Image

Step 1½

If it is ambiguous which image was right-clicked upon, Search by Image will ask you to select the one you want, like so,

    Search by Image asks Pick an Image

Step 2

Search by Image then creates a new tab with the image embedded in it.

    Result of Open Image

Step 3

Right click on the image to get the browser context menu. Now you will be able to use Save Image As… ² to download it to your computer.

    Save Image As...

Voilà! Your blob image has been downloaded.



¹: Google is silly and disables the right click menu, but you can still use Shift + right click in Firefox or the Allow Right-Click extension in Chrome.

²: Exactly what the menu option is labelled will depend upon which browser is being used. I am using Firefox, but this technique works for Chrome, Edge, Safari, etc.

2

I used this library: https://github.com/rndme/download

let img = document.querySelector('.blob-img');
let canvas = document.createElement('canvas');
canvasContext = canvas.getContext && canvas.getContext('2d');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
canvasContext.drawImage(img, 0, 0);
let imgBase64 = canvas.toDataURL('image/png');
download(imgBase64, 'filename.png');
1

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.

0

Another option is using GIMP.

Right-click on the blob, choose "Copy Image", open GIMP then paste into a new document. You then can export it out from there as a JPG or whatever file extension you like.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .