为什么我不能从 Javascript 将图像源设置为 blob？答案

【问题标题】：Why can't I set image source to blob from Javascript?为什么我不能从 Javascript 将图像源设置为 blob？
【发布时间】：2016-07-17 18:32:07
【问题描述】：

我正在尝试使用 Javascript LoadImage 库 (https://github.com/blueimp/JavaScript-Load-Image) 从文件中加载图像。

load 方法返回一个图像对象，其 src 设置为某个 blob 对象：

<img src="blob:http%3A//localhost%3A3577/902d4e78-2e3e-467c-99ce-6683db24996e" width="960" height="540">

如果我将此元素附加到 DOM，它会很好地显示。但是，根据我的需要，我只需要图像数据，而不是 DOM 对象。我需要获取该数据并将另一个现有元素的src 设置为该数据。所以，就像任何理智的人会做的那样，我得到返回的对象的src (blob:http%3A//localhost%3A3577/902d4e78-2e3e-467c-99ce-6683db24996e)，获取对我现有图像 DOM 对象（下面命名为 img）的引用，并使用 jQuery，设置它的 src:

img.attr('src', src);

这导致我现有的图像对象变为：

<img src="blob:http%3A//localhost%3A3577/902d4e78-2e3e-467c-99ce-6683db24996e">.

是的，完全一样（期望明确的width 和height 属性，我也尝试添加它们，但完全没有改变）。但是，我现有的标签现在显示的不是图像，而是损坏的图像：

为什么以及如何当带有相同src的图像标签时，一个可以显示图像而另一个不能？

【问题讨论】：

stackoverflow.com/questions/14952052/…
@Malk 它说 blob 不能在计算机/网络/浏览器等之间共享，这是显而易见的。但是，我的情况是同一个窗口中的两个 DOM 元素。
第二个 DOM 元素是否与第一个 DOM 完全相同？也就是说，您是否试图在页面加载或其他内容中携带 blob？
@duskwuff 正如我在问题中明确指出的那样，我在同一个 DOM 中，因此它们甚至在同一个脚本块中执行。没有页面加载等。

标签： javascript jquery html image blob

【解决方案1】：

这很可能是由于 LoadImage 库调用 URL.revokeObjectURL() 以释放分配的图像。

尝试specify noRevoke 选项。

【讨论】：

就是这样。默认值为false，使用户误以为该 URL 是可重复使用的。