如果调用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中我收到消息:Failed to load resource: the server responded with a status of 404 (Not Found)后跟一个前缀为的网址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. 一旦你撤销你的网址,你基本上告诉浏览器你不再需要数据,如果你想释放内存这是好的,但如果你仍然有指向该网址的引用(例如img标签),则会很糟糕.

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