我知道我可以使用 FileReader 或 URL.createObjectURL 将 Blob 解析为字符串并设置 image.src 和它一起。
但是我想知道是否可以直接用Blob设置图片内容？
最佳答案
使用您使用 URL.createObejctURL(blob); 创建的 blobURL。
在评论中，您表示您担心浏览器支持和内存使用(您甚至谈论内存泄漏......)。
浏览器支持
只有少数版本的 Chrome 支持 FileReader 对象，但不支持 URL.createObjectURL(IIRC，v14 左右)。 Internet Explorer 在 IE10 中添加了支持，就像他们对 Blob 对象和 FileReader 所做的那样。
内存使用情况
blobURL 只是一个指向数据的指针，该数据要么已经在内存中，要么只在磁盘上。指针在内存中没有权重。
另一方面，dataURL 是二进制数据的字符串表示。它比它所表示的数据的权重大约高 34%(因为二进制需要映射到更多安全字符)。
现在，绘制 URI 另一端的图像，
- 对于 blobURI，浏览器会直接解析它并从中生成位图 => 内存使用量约为图像大小的 2.5 倍(就像从服务器下载一样)。
- 对于 dataURI，浏览器将首先解析字符串(但无法摆脱它)以访问二进制格式 (1.34x + 1x)，然后解析它并从中生成位图 (+ 2.5 倍 => 4.84 倍)。
不仅如此，如果你打算在多个地方分配这个 dataURI，那么每次你简单地复制字符串时，它的数据就会多 1.34 倍，考虑到缓存 dataURI 的难度，你最终会使用很多内存来表示相同的二进制数据...
内存泄漏？
不，没有内存泄漏。很简单，当一个 Blob 被 blobURL 引用时，只要 blobURL 没有被撤销，这个 Blob 就不能被 GarbageCollector 收集。但是鉴于 blobURL 的生命周期与创建它的文档相关联，它无论如何都会在下次刷新时消失。
此外，如果您正在处理来自用户磁盘的数据，那么 blobURL 实际上只是一个指针，没有数据存储在内存中。
FileReader 的 readAsDataURL 方法实际上只有少数用例，除非您确定必须使用它，否则只需使用 blobURL。
关于javascript - 这就是为什么要使用 Blob 设置 <img> 内容，而不使用 FileReader 或 URL.createObjectURL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54705442/