图像的 Blob URL

Question

如何“保存”这张图片？

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

发现于：https://theta360.com/s/lE2in9qQDK6j2CcjPAQcvNhOi

我尝试了一些在SO上找到的脚本，它使用

canvas.toDataURL

但是我收到错误：

不允许加载本地资源：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

无法从不同来源请求由

URL.createObjectURL()

创建的 URL。

objectURL

存在于创建它的

window

中，并在创建它的

document

的生命周期内存在。

URL.createObjectURL()

URL.createObjectURL()

静态方法创建一个

DOMString

包含表示参数中给定对象的 URL。网址 生命周期与它所在窗口中的

document

相关联 创建的。新对象 URL 代表指定的

File

对象或

Blob

物体。

Answer 2

我找到了如何获取图像，但这与编程不再有任何关系。

使用

chrome://cache/

查看 Chrome 缓存并搜索

equirectangular_web_optimized

Answer 3

我这样做是为了获取 BLOB Url (file.localDataUrl) 的 props 大小

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

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

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