在 Safari 中将 Blob 加载到 img 时出错（WebKitBlobResource 错误 1。）答案

【问题标题】：Error loading Blob to img in Safari (WebKitBlobResource error 1.)在 Safari 中将 Blob 加载到 img 时出错（WebKitBlobResource 错误 1。）
【发布时间】：2021-09-23 22:00:00
【问题描述】：

我正在尝试将 blob 保存到 localforage，然后检索它并显示它。它可以正常工作一段时间，但是在几次页面刷新或浏览器关闭后，我在某些 blob 上出现错误。完整的错误如下：

Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 1.)

这是我的其余代码。将项目保存到 localforage：

canvas.toBlob(function(blob){
  allItems.push({"string":string,"blob":blob});
  localforage.setItem("savedItems",allItems);
},"image/jpeg",0.02);

从 localforage 加载项目：

localforage.getItem("savedItems").then(function(jsonData){
  if(jsonData==null){allItems=[];}
  else{allItems=jsonData;}
});

将 blob 添加到图像源：

let thisURL = window.URL || window.webkitURL;
let url=thisURL.createObjectURL(allItems[k]['blob']);
img.src=url;

这似乎是 Safari 特定的问题，因为我无法在 Chrome 中复制它。

【问题讨论】：

标签： canvas safari blob localforage createobjecturl

【解决方案1】：

更新 TLDR；

indexeddb 中的 Blob 在 iOS Webkit 中是不可靠的。因此，请将您的 blob 保存为数组缓冲区，并将 blob 的类型保存为 indexeddb 中的字符串。您可以像这样获取 ArrayBuffer 和 blob 的类型：

await blob.arrayBuffer()
blob.type

当您想从 indexeddb 中检索数据并显示它时，只需从 ArrayBuffer 中创建一个新的 blob 并输入：

const blob = new Blob([value.buffer], { type: value.type });
URL.createObjectURL(blob);

调查

我在 iOS WebKit / safari 上有一个非常相似的问题：我还将从服务器接收到的图像和视频 blob 存储在 indexeddb 中。然后使用 createObjectUrl() 检索 blob 并将其转换为 URL。这适用于除 WebKit / safari 之外的所有浏览器引擎。 iOS WebKit / safari 仅在前几次有效。我还没有找到完美的解决方案，但到目前为止我可以分享我的发现：

一般来说，所有类似问题的 cmets 都在说“WebKit 上的 blob 不可靠”。

有一些可能的解决方法：https://stackoverflow.com/a/60075517/13517617 不过我还是要试试这个。

我们还可以做的是使用 fileReader 创建一个 base64 字符串并将其用作 src。而不是 createObjectUrl()。可以这样实现：

const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result
};

这不是一个理想的解决方案，因为我们现在有一些回调。

有一些提示指出，必须正确指定 blob 的 mime 类型才能使其始终在 iOS WebKit / safari 中工作。

我会更深入地挖掘并在这里分享我的最终答案。也许其他人更快或以前遇到过这个问题。

【讨论】：