How to get the cached image of the browser?

Question

I am implementing a Web page in JavaScript with Angular.JS & ionic. A page generator is one of the menu items that have a header field where the user can load a file. With the [Save] button, the result is sent to the relational database.

The page generator is saving the whole generated HTML object in the database like

<div class="hero-image" ivm-bg-axis="y" ivm-bg-drag="" ivm-bg-disabled="disabled" ng-style="imageOptions.style" ngf-background="ngModel" style="background-image: url(&quot;blob:null/3dfb1617-e1c8-45e8-9c0e-5f772129d2cb&quot;);"></div>

where the image is denoted with *style="background-image: url("blob:null/3dfb1617-e1c8-45e8-9c0e-5f772129d2cb");*. This is probably the unique key of the cached browser object, is it? If so, I want to save this image as a BLOB object, say, in another field of the same database record.

Question: How is it possible to get this image out of the browser? Is there a difference getting out this information between different browsers?

Thank you for your reply!

Edit: What I need in pseudo-code is something like this:

var cache = new BrowserCache();

var imageURL= cache.querySelector('url["blob:null/520cf0e0-fa19-438c-9db7-68af87f30f56"]');

var image = cache.getElement(imageURL);

// Convert image to appropriate format, if necessary
// Add image information to record to be sent to the server

https://stackoverflow.com/questions/18650168/convert-blob-to-base64 You may find this answer handy. Just catch all the blob urls, get the base64 url and replace (it must be done before sending to the database). — Are, Sep 14 '17 at 13:24
But the example there starts with getAsFile(), which, according to the Mozilla page of DataTransferItem.getAsFile(), returns null, if the object is not a file. Do you think that the blob:null object is a file? I do neither have a 'file', nor an 'img' tag. — Sae1962, Sep 14 '17 at 14:13
How do you get the blob doesn't really matter. All you need is a blob, then you can use FileReader to read it and store the file. — Are, Sep 15 '17 at 07:54
`null` in blob path means only that it has been created on localhost origin as per this answer: https://stackoverflow.com/questions/28377733/url-createobjecturl-returns-a-blob-with-null-prepended-eg-blobnull-12415-63 — Are, Sep 15 '17 at 07:55
Possible duplicate of [How to get a file or blob from an object URL?](https://stackoverflow.com/questions/11876175/how-to-get-a-file-or-blob-from-an-object-url) — Kaiido, Sep 15 '17 at 08:16
What you've got is a blobURI, this is a **pointer** either to some place in memory, either to disk, in case of user provided file. — Kaiido, Sep 15 '17 at 08:17

Are · Accepted Answer · 2017-09-15T09:32:11.723

1

Based on your pseudo-code and my comments, I'll try to compile it here and hopefully it helps.

As I said, this code must be executed in the same window where the blob was constructed. Otherwise there is no option of getting the file back.

function getBlobFromUrl (bUrl) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.responseType = 'blob'
    xhr.addEventListener('load', event => {
      if (xhr.status === 200) {
        resolve(xhr.response)
      } else {
        reject(new Error('Cannot retrieve blob'))
      }
    })

    xhr.open('GET', bUrl, true)
    xhr.send()
  })
}

function fromBlobToBase64 (blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.addEventListener('loadend', event => {
      resolve(reader.result)
    })
    reader.readAsDataURL(blob)
  })
}

let blobUrl = 'blob:null/520cf0e0-fa19-438c-9db7-68af87f30f56'
getBlobFromUrl(blobUrl).then(fromBlobToBase64).then(result => {
  // result will contain file encoded in base64
})

Based on those two answers:

If you want to read more, there are links to relevant documentation:

edited Sep 15 '17 at 09:32

answered Sep 15 '17 at 08:10

Are

2,160
1
21
31

Why convert it to a b64 string? – Kaiido Sep 15 '17 at 08:15
It's an example, you can inline b64 string into the original code. – Are Sep 15 '17 at 08:17
Thank you very much for your detailed reply! Is it possible to display the image in a dialogue for test purposes? Something like `alert(url, 'The image')`? – Sae1962 Sep 15 '17 at 08:28
If you have created the image using `new Image()`, you can just append it to a body like so: `document.body.appendChild(image)`. More info here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image – Are Sep 15 '17 at 08:41
Thanks! By the way: Where is `blob` defined in `function fromBlobToBase64 ()`? And the line `reader.readAsDataUrl(blob);` results in an `Uncaught (in promise) TypeError: reader.readAsDataUrl is not a function` error. And a `document.body.appendChild(image)` needs another `alert()` or so to be displayed, isn't it? – Sae1962 Sep 15 '17 at 09:22
It seems that I have capitalized the name of the function wrong - my bad. It should be `readAsDataURL`. As for `document.body.appendChild(image)` you dont need another `alert`, because the image should appear in the HTML. I fixed the mistakes I made and it should work (hopefully). – Are Sep 15 '17 at 09:31
Is it possible to open the `result` in a window to display the file? – Sae1962 Sep 15 '17 at 13:15
1

https://stackoverflow.com/questions/27798126/how-to-open-the-newly-created-image-in-a-new-tab Try to follow this answer. Also, if you consider your question answered/solved, you can mark it as such. – Are Sep 15 '17 at 13:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154538/discussion-between-sae1962-and-are-wojciechowski). – Sae1962 Sep 15 '17 at 13:44

How to get the cached image of the browser?

1 Answers1