如果调用 revokeObjectURL，Blob 图像将不会显示在 Chrome 中

Question

-----更新-----

我注释掉了 window.URL.revokeObjectURL( imgSrc );，现在该调用在所有浏览器中都有效。 url 似乎在 Chrome 中被撤销得太早了。我仍然很想知道这是为什么，并且想知道在任何人看来我现在处理撤销 URL 的方式是否有任何问题。我现在撤销最后一个 URL，因为下一个加载了 if (imgSrc) {window.URL.revokeObjectURL( imgSrc );}（imgSrc 现在是一个全局变量）。

我有一个网站使用 AJAX 调用 CGI 脚本，输出 image/jpeg 数据，然后使用创建对象URL 函数。目前它适用于所有浏览器，但 Chrome。

在所有其他浏览器中显示图像，但在 Chrome 中我收到消息：Failed to load resource: the server responded with a status of 404 (Not Found) 后跟 url，前缀为 blob:。

我曾尝试使用 webkitURL，但这给了我同样的错误，后跟 webkitURL is deprecated。

这是我的 AJAX 调用的代码：

var filepath = "/babelia.cgi";
xmlhttp=new XMLHttpRequest();

xmlhttp.onload = function(oEvent) {
if (imgSrc) {window.URL.revokeObjectURL( imgSrc );}
        var blob = xmlhttp.response;
        if (endless) {
        imgSrc = (window.URL ? URL : webkitURL).createObjectURL( blob );
        document.getElementById("palette").src = imgSrc;
        // window.URL.revokeObjectURL( imgSrc );
        babel();
        }
    }
xmlhttp.open("POST",filepath,true);
xmlhttp.responseType = "blob";
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var info = "location=" + postdata;
if (!landscape) {info += "&flip=portrait";}
xmlhttp.send(info);

您可以在这里查看网站：https://babelia.libraryofbabel.info/slideshow.html

Answer 1

我在理解 blob 时也遇到了一些问题，这是我的 2 美分。

我建议在使用 blob 时使用 https://github.com/eligrey/Blob.js 来抽象掉浏览器差异。
调试时 chrome 查看 chrome://blob-internals/ 了解详情。在当前版本 (47.0.2526.106) 中，它显示 urls 和相关数据或对那些 urls 的本地文件的引用。
一旦你撤销 url 你基本上告诉浏览器你不再需要数据，如果你想释放内存这是好的，但如果你仍然有引用指向那个url（例如 img 标签）。

旁注：阅读你的问题让我解决了我自己的问题，我在撤销后在 chrome 中看到了 404，因为我仍然引用了已撤销的 [=29] =] 在 img 标签上。

如果调用 revokeObjectURL，Blob 图像将不会显示在 Chrome 中

Blob images will not display in Chrome if revokeObjectURL is invoked

javascript

ajax

cgi

blob

image