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

Question

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

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

---

我有一个使用 AJAX 调用 CGI 脚本的网站，该脚本输出图像/jpeg 数据，然后使用 createObjectURL 函数将 blob 响应设置为页面上图像的 src。目前它适用于除 Chrome 之外的所有浏览器。

在所有其他浏览器中显示图像，但在 Chrome 中我收到消息:无法加载资源:服务器响应状态为 404(未找到)，后跟一个以 为前缀的 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 美分。

1. 我推荐使用 https://github.com/eligrey/Blob.js用于在处理 blob 时抽象掉浏览器差异。
2. 调试 chrome 时，请查看 chrome://blob-internals/了解详细信息。对于当前版本 (47.0.2526.106)，它会显示 URL 和相关数据或这些 URL 对本地文件的引用。
3. 一旦您撤销该 url，您基本上就是告诉浏览器您不再需要该数据，如果您想释放内存，这很好，但如果您仍然有指向该 url 的引用(例如 img 标签)，则不好.

旁注:阅读您的问题让我解决了我自己的问题，即撤销后我在 chrome 中看到 404，因为我仍然在 img 标签上引用了已撤销的 url。