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

作者: 庸人自扰1
发布时间: 2024-09-12 11:25:10 (2天前)
转自：

2 条回复

0#
回复此人
哇塞 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 因为 <code> toDataURL </code> 是一个早期的错误...... 在它实施的时候（通过Safari IIRC），仍然只讨论FileAPI，并且已经需要导出画布的结果。所以他们制作了这个方法，它确实在一个方便的数据URL中返回数据，你可以直接使用它作为 <code> src </code> 文件中的几个要素。此时，同步返回它听起来像一个好主意，Canvas API中的所有内容都是同步的。 但是几年之后，随着越来越多的实现，越来越多的用途和新的API，显而易见的是 <code> toDataURL </code> 不是一个好主意。就像同步XHR一样，如果你已经足够老了，可以记住。 尽管您可以以同步方式获取数据URL，但无论如何显示它都将是一个异步任务。 要从画布生成图像文件是一个缓慢的操作，您需要导出所有像素数据，取消它，然后调用压缩算法。 除此之外，数据URL需要存储为base64编码的String，比它所代表的二进制数据大34％，并且每次在DOM中的某处分配时都会复制到内存中... FileAPI引入了将二进制数据保存在内存中的方法，并能够显示，操作或将其原样发送到服务器。所有这些都意味着最小的内存开销=＆gt;数据URL已过时（大多数情况下）。 因此，已决定添加一种新方法，该方法将利用这些新API，并返回Blob而不是数据URL。在针对UI阻塞操作的常见斗争中，已经确定该方法将是异步的 <子> （但不幸的是，那是在Promise进来之前...） </子> 。现在所有必须同步完成的工作就是抓住像素数据，比如 <code> getImageData </code> 确实。其余操作可以并行完成。 </DIV>

编辑

登录后才能参与评论