Blob URL to image

Question

How can I "save" this image?

blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787

found on: https://theta360.com/s/lE2in9qQDK6j2CcjPAQcvNhOi

I tried some script I found on SO which uses canvas.toDataURL

But I get an error:

Not allowed to load local resource: blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787

Javascript:

var url = "blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787"; // document.getElementById("img1").src; // 'img1' is the thumbnail - I had to put an id on it
var canvas = document.getElementById("MyCanvas");
var img = new Image();
img.src = url;
img.onload = function () {
    var myImage = canvas.toDataURL("image/jpg");
    document.getElementById("dataurl").value = myImage;
}

HTML:

<canvas id="MyCanvas">This browser or document mode doesn't support canvas</canvas>
<input id="dataurl" name="dataurl" type="text" size="50" />

Injustice

Try replacing %3A by :. – Grig

In any case you can save a URL by creating an a element, set its download attribute to image.jpg, its href attribute to that URL and then click on it (with .click()). – Grig

no that did not work... <a href="blob:https://theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787" download="image.jpg">download blob image</a> **Failed. No File – Injustice

There do not appear to be any <img> elements at linked page having src "blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787"? It is not possible to request an objectURL from another origin; see "Security and other considerations" at Working with files in JavaScript, Part 4: Object URLs – Giarla

you can download a blob using my downloader script: github.com/rndme/download – Wolffish

@Wolffish Does your script download an objectURL created by URL.createObjectURL() at a different origin than the origin the script is called from? – Giarla

@guest271314: i don't see how an objectURL could be from a different origin, but it's worth a shot. a[download] used to not care about origins, and now it looks at CORS, but i again, don't see how domain would come into play here... blob urls are made by window, so they have to be "local" – Wolffish

@Wolffish See "The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object." at developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL ; nczonline.net/blog/2012/05/31/… at "Security and other considerations" – Giarla

@guest271314: exactly. given all that, how could the url come from a different domain? if OP is trying to just paste in a random url string from somewhere online, then no, that's never going to work... – Wolffish

@Wolffish That is, if not mistaken, what OP was attempting to achieve. That is, visit the page, copy url of objectURL, try to download the url from a different origin. – Giarla

Answer 1

It is not possible to request a URL created by URL.createObjectURL() from a different origin. objectURL exists within the window that created it for the lifetime of the document that created it.

URL.createObjectURL()

The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.

Giarla

very very interesting.. So the image is loaded into the browser cache and deleted when the page is unloaded. The images can not be accessed because of the domain security! - I have been wondering about how to serve images that are not cached for AGES. Very cool. What about the cache? Can the data be pulled out of the browser cache?? – Injustice

@FFish "So the image is loaded into the browser cache and deleted when the page is unloaded. The images can not be accessed because of the domain security." Yes. – Giarla

@FFish There do not appear to be any <img> elements at linked page which have src set to blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787 ? Where did you locate the url listed at Question at the linked document? – Giarla

@FFish Yes, though note, your solution does not reference original url described at OP blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787 ? Could not locate that specific url when visited page? – Giarla

Yeah could be. Looks like the blob's numeric part changes anyway, maybe there is some timestamp involved? – Injustice

That is how objectURLs are defined. Each is unique. Where did you locate the blob: url at linked page? – Giarla

Note that objectURL may survive until you hard-refresh the original Document (just closing the window or a simple refresh won't release it). Hence the need to call revokeObjectURL as soon as the objectURL is not needed anymore (generally when loaded). – Hugues

@Hugues objectURL would also survive at blob: url until that particular tab is closed, even where URL.revokeObjectURL() called and original document , window closed. – Giarla

@Giarla hum no. As soon as revokeObjectURL is called, the objectURL is released. You can't load it anymore. Of course, it won't clear the one already loaded (be it in <img> tag or new window). – Hugues

@Hugues "Of course, it won't clear the one already loaded" Yes, this is case attempting to describe at previous comment – Giarla

Ok, so the url doesn't survive, only the decoded data fetched in cache. – Hugues

@Hugues If cache is enabled. Though should not be listed at chrome://blob-internals after being revoked – Giarla

no even if cache is disabled, it will still be in cache as long as you don't refresh the page. It's not the same cache as the Network one. So it's more as long as the DOMObject containing the data is not deleted. But it becomes chatty ;-) – Hugues

If cache is disabled, what cache are you referring to? Reference to object at document? "But it becomes chatty" Well, describe what you are referring to; please illuminate fully. – Giarla

yes, the js cache or DOM cache or whatever you call it. The one that makes every object defined in the page available until you delete it. The one GarbageCollector will clear. Maybe "memory" is better than cache to describe it. But the point is that you will still have the data avalbale, but not from the url created. – Hugues

I'm not sure I got it. For the first case, you can't access the blob from the url anymore. But if you saved it in a variable (using xhr) or in a DOMElement (<img> in OP), then you can still access the parsed response of the original and now revoked URLObject. In the second case, if you didn't revoked the url, then you can still access the file through the url (that you may have stored in localStorage or copy/pasted) until you hard-refresh the original page. Closing it is not enough. – Hugues

Answer 2

I found how to get the image but this does not has anything to do with programming anymore.

Look in Chrome's cache with chrome://cache/and do a search for equirectangular_web_optimized

Injustice

That is not same url described at OP blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787 ? Could not locate url referenced at original Question at linked page? Where did you locate the blob: url at linked page? – Giarla

Answer 3

i did this way to get the props sizes of an BLOB Url (file.localDataUrl)

    const img = new Image();
    img.src = file.localDataUrl;

    img.onload = (a) => {
        console.log(a);
        console.log([a.path[0].width, a.path[0].height]);
    };

Complainant

Answer 4

const xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = e => {
    const blob = xhr.response;
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'title/file_name';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};
xhr.open('GET', imageURL);
xhr.send();

or

fetch('imageURL')
        .then(r => r.blob())
        .then(r => {
            let link = document.createElement('a');
            link.href = URL.createObjectURL(r);
            link.download = 'title/file_name';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });

Agonizing