在Safari中将Blob加载到img时出错(WebKitBlobResource错误1.)
我试图保存一个blob，以本地饲料，然后检索和显示它。它可以正常工作一段时间，但是在几个页面刷新或浏览器关闭之后，我会得到一些小块上的错误。完全错误如下：
Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 1.)这是我剩下的代码。将项目保存到本地饲料：
canvas.toBlob(function(blob){
allItems.push({"string":string,"blob":blob});
localforage.setItem("savedItems",allItems);
},"image/jpeg",0.02);从本地饲料装载物品：
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中复制它。
回答 1
Stack Overflow用户
发布于 2021-12-06 23:29:48
更新TLDR；
indexeddb中的Blobs在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上有一个非常类似的问题:我还将从服务器接收到的图像和视频块存储在indexeddb中。然后检索这些blobs并将其转换为带有createObjectUrl()的URL。这在除WebKit / safari之外的所有浏览器引擎上都能很好地工作。iOS WebKit / safari只在前几次工作。我还没有找到一个完美的解决方案，但到目前为止，我可以分享我的发现：
一般来说，所有对类似问题的评论都在说“WebKit上的问题是不可靠的”。
有一些可能的解决办法：https://stackoverflow.com/a/60075517/13517617，我仍然需要尝试这个方法。
另外，我们可以做的是使用fileReader创建一个base64字符串，并将其用作src。而不是createObjectUrl()。这是可以做到的：
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
const base64data = reader.result
};这不是一个理想的解决方案，因为我们现在有一些回调。
有一些提示指出，必须正确指定blobs的mime类型才能使其始终在iOS WebKit / safari中工作。
我将深入挖掘，并在此分享我的最后答案。也许其他人更快，或者以前也遇到过这个问题。
https://stackoverflow.com/questions/68386273
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号