toBlob和 toDataURL的区别及选择

带脑子的CV工程师

于 2024-04-07 09:40:53 发布

阅读量471

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/qq_36262295/article/details/137450965

版权

本文分析了HTML5Canvas的toDataURL和toBlob功能，讨论了它们的用途，如数据URL展示、Blob上传，并强调了各自的优缺点。

摘要由CSDN通过智能技术生成

toBlob() 和 toDataURL() 是 HTML5 Canvas 对象的两种方法，
用于将 Canvas 中的内容转换为不同格式的数据。

toDataURL()：

toDataURL() 方法将 Canvas 中的内容转换为基于 Base64 编码的 PNG 或 JPEG 图像的 data URL。
语法：canvas.toDataURL(type, encoderOptions)
语法：canvas.toDataURL(type, encoderOptions)
参数 type 表示图像格式，可选值为 "image/png"、"image/jpeg" 等，默认为 PNG 格式。
参数 encoderOptions 表示图像质量，取值范围为 0 到 1，仅在选择 JPEG 格式时有效，默认为 0.92。
返回值是一个字符串，包含了整个 Canvas 图像的 data URL。

toBlob()：

toBlob() 方法将 Canvas 中的内容转换为 Blob 对象。
语法：canvas.toBlob(callback, type, quality)
参数 callback 是一个回调函数，用于接收生成的 Blob 对象。
参数 type 表示图像格式，可选值为 "image/png"、"image/jpeg" 等，默认为 PNG 格式。
参数 quality 表示图像质量，取值范围为 0 到 1，仅在选择 JPEG 格式时有效，默认为 0.92。
toBlob() 方法不会立即返回结果，而是异步生成 Blob 对象，并在生成完成后调用回调函数传递给它。

区别：

主要区别在于返回值和使用方式。
toDataURL() 返回的是一个 Base64 编码的 data URL 字符串，
而 toBlob() 返回的是一个 Blob 对象。
因此，如果需要直接上传到服务器或者在客户端进行二进制处理，使用 toBlob() 更合适；
而如果需要在页面中展示图片或者将图片保存为链接，可以使用 toDataURL()。
此外，toDataURL() 可以直接指定图片格式和质量，
而 toBlob() 需要在回调函数中处理生成的 Blob 对象。