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

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.