7

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" />
Improve this question
10
  • Try replacing %3A by :. Commented Apr 10, 2016 at 19:22
  • 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()). Commented Apr 10, 2016 at 19:24
  • 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 Commented Apr 10, 2016 at 19:36
  • 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 Commented Apr 10, 2016 at 19:41
  • 1
    @dandavis 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. Commented Apr 10, 2016 at 20:05

4 Answers 4

Reset to default
6

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

16 Comments

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??
@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.
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).
@guest271314 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).
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.
|
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

Improve this answer

1 Comment

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?
0

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]);
    };
Improve this answer

Comments

0 
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);
        });
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.