什么时候调用URL.revokeObjectURL安全？

作者

如果我理解正确，createObjectURL将创建一个表示文件或blob的URL。因为URL只是一个字符串，浏览器无法知道您何时使用完URL所代表的资源，因此提供了一个URL.revokeObjectURL函数

MDN显示了以下示例：

var canvas=document.getElementById（“canvas”）；
canvas.toBlob（函数（blob）{
var newImg=document.createElement（“img”）；
var url=url.createObjectURL（blob）；
newImg.onload=函数（）{
//不再需要读取blob，因此它被撤销
revokeObjectURL（URL）；
};
newImg.src=url；
文件.正文.附件（newImg）；
});

所以有一些问题

  1. 在分配newImg.src后立即更改代码以撤销URL是否安全

    var canvas=document.getElementById（“canvas”）；
    canvas.toBlob（函数（blob）{
    var newImg=document.createElement（“img”）；
    var url=url.createObjectURL（blob）；
    newImg.src=url；
    //不再需要读取分配给newImg.src的blob
    revokeObjectURL（URL）；
    文件.正文.附件（newImg）；
    });

    我猜答案是“否”，因为newImg.src=url上可能没有任何内容。此时它仍然只是一个字符串，在当前JavaScript事件退出之前将一直如此。还是这样

  2. 撤销URL是否有效/合法/正确，但在知道它被其他对象引用的情况下仍然使用它

    var canvas=document.getElementById（“canvas”）；
    canvas.toBlob（函数（blob）{
    var newImg=document.createElement（“img”）；
    var url=url.createObjectURL（blob）；
    newImg.onload=函数（）{
    //不再需要读取blob，因此它被撤销
    revokeObjectURL（URL）；
    //重新使用URL，即使它已被吊销
    var newImg2=新图像（）：
    newImg2.src=url；
    };
    newImg.src=url；
    文件.正文.附件（newImg）；
    });

    在本例中，我正在分配newImg2.src=url，即使我已经撤销了url。其想法是，newImg仍在引用blob URL，因此可以说

    someImage.src=someOtherImage.src

    随时都可以。是吗

好吧，按照@adeneo的建议，我测试了这个

$（'#test'）。在（'change'，函数（e）上{
var newImg=document.createElement（“img”）；
var url=url.createObjectURL（e.target.files[0]）
console.log（url）；
newImg.src=url；
revokeObjectURL（URL）；
文件.正文.附件（newImg）；
console.log（url）；
});
$（'#test3'）。关于（'change'，函数（e）{
var newImg=document.createElement（“img”）；
var url=url.createObjectURL（e.target.files[0]）
console.log（url）；
newImg.src=url；
newImg.onload=函数（）{
revokeObjectURL（URL）；
文件.正文.附件（newImg）；
var i=新图像（）；
i、 src=newImg.src；
文件.正文.附件（一）；
setTimeout（函数（）{
var g=新图像（）；
g、 src=newImg.src；
文件.正文.附件（g）；
}, 3000);
}
});
&lt；脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“&gt&lt/脚本&gt；
&lt；p&gt；使用前测试&lt/p&gt；
&lt；输入type=“file”id=“test”/&gt；
&lt；br/&gt；
&lt；br/&gt；
&lt；br/&gt；
&lt；p&gt；测试使用撤销使用&lt/p&gt；
&lt；输入type=“file”id=“test3”/&gt

至少在Firefox中，一旦调用了URL.revokeObjectURL，该URL就不能再使用，即使其他东西正在访问它

因此，问题中的#1和#2都失败了，即使在#2newImg.src中仍然有一个URL，一旦调用了URL.revokeObjectURL，URL在其他任何地方都不会工作

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with