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

- FFish

---

尝试将 %3A 替换为 :。 - Sebastian Simon

无论如何，您都可以通过创建一个a元素，将其download属性设置为image.jpg，将其href属性设置为该URL，然后点击它（使用.click()）来保存URL。 - Sebastian Simon

不行啊，<a href="blob:https://theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787" download="image.jpg">下载Blob图像</a>失败了。没有文件。 - FFish

你可以使用我的下载器脚本 https://github.com/rndme/download 下载一个 blob。 - dandavis

@dandavis，如果我没有理解错误的话，这就是OP试图实现的目标。也就是说，访问页面，复制objectURL的url，尝试从不同的源下载该url。 - guest271314

Answer 1

无法从不同的源请求由URL.createObjectURL()创建的URL。 objectURL存在于创建它的window中，对于创建它的document的生命周期而言。

URL.createObjectURL()

URL.createObjectURL() 静态方法创建一个包含表示参数中给定对象的 URL 的 DOMString。URL 的生命周期与创建它的窗口中的 document 相关联。新的对象 URL 表示指定的 File 对象或 Blob 对象。

- guest271314

---

非常有趣...因此，图像被加载到浏览器缓存中，并在页面卸载时删除。由于域安全性无法访问这些图像! - 我一直想知道如何提供不被缓存的图像已经很长时间了。非常棒。那么缓存呢？可以从浏览器缓存中获取数据吗？ - FFish

@FFish 是的，不过请注意，您的解决方案没有引用 OP 中描述的原始 URL blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787。当访问页面时找不到该特定 URL？ - guest271314

请注意，objectURL 可能会一直存在，直到您强制刷新原始文档（仅关闭窗口或简单刷新不会释放它）。因此，在不再需要 objectURL 时（通常在加载后），需要立即调用 revokeObjectURL。 - Kaiido

嗯，一旦调用了 revokeObjectURL，对象 URL 就会被释放。你不能再加载它了。当然，它不会清除已经加载的（无论是在 <img> 标签中还是在新窗口中）。 - Kaiido

是的，js缓存或DOM缓存或者你称之为什么都可以。它使页面中定义的每个对象可用，直到您将其删除。这是GarbageCollector将清除的内容。也许“内存”比“缓存”更好地描述了它。但重点是您仍然可以使用数据，但不能从创建的URL获取。 - Kaiido

Answer 2

我找到了如何获取图像，但这与编程无关了。

在Chrome缓存中查找chrome://cache/并搜索equirectangular_web_optimized。

- FFish

---

这个不是OP描述的相同URL blob:https%3A//theta360.com/473c6400-b8e7-4c41-8f7a-90f03cbc8787吗？在链接页面上找不到原始问题引用的URL？你在链接页面上找到了blob: URL在哪里？ - guest271314

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

- kblza

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

或者

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

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