CODEWITHSUNDEEP
javascriptcanvasblob
TunaFFish
TunaFFish

Reputation: 11302

Blob URL to image

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" />

Upvotes: 7

Views: 32403

Answers (4)

Сергей Горбулев
Сергей Горбулев

Reputation: 181

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);
        });

Upvotes: 0

kblza
kblza

Reputation: 21

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

Upvotes: 0

TunaFFish
TunaFFish

Reputation: 11302

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

Upvotes: 2

guest271314
guest271314

Reputation: 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.

Upvotes: 6

Related Questions