javascript - 为什么 canvas.toBlob 和 canvas.toDataURL 有不同的返回类型

Question

canvas.toBlob() 需要回调函数，但 canvas.toDataURL() 会同步返回结果。为什么不同？这不是问题，但我非常好奇，我找不到解释为什么会这样。

Answer 1

因为 toDataURL 是一个早期错误...

在它实现时(由 Safari IIRC)，FileAPI 仍然只是在讨论中，导出 Canvas 的结果已经是一种需要。所以他们制作了这个方法，它确实以方便的数据 URL 返回数据，您可以直接将其用作文档中多个元素的 src。此时，同步返回它听起来是个好主意，Canvas API 中的所有内容都是同步的。

但几年后，随着越来越多的实现、越来越多的使用以及新的 API，很明显 toDataURL 并不是一个好主意。就像同步 XHR，如果你足够大，可以记住。
即使您可以同步方式获取数据 URL，显示它仍然是一项异步任务。

从 Canvas 生成图像文件是一项缓慢的操作，您需要导出所有像素数据，取消相乘，然后调用压缩算法。

除此之外，数据 URL 需要存储为 base64 编码的字符串，比它表示的二进制数据大 34%，并且每次在 DOM 中的某处分配它时都会将其复制到内存中...

FileAPI 引入了将二进制数据保存在内存中并能够显示、操作或将其原样发送到服务器的方法。所有这些都意味着最小的内存开销 => 数据 URL 已过时(对于大多数情况)。

因此决定添加一个新方法，该方法将利用这些新 API，并返回一个 Blob 而不是数据 URL。在与 UI 阻塞操作的共同斗争中，已决定此方法将是异步的 _{(但不幸的是，那是在 Promise 出现之前...)}。现在所有需要同步完成的就是获取像素数据，就像 getImageData 所做的那样。其余操作可以并行完成。