前言
关于前端处理图片，我们一般会使用 canvas API，它可以帮助我们对图片进行各种处理。但是，如果要将这个处理过后的图片保存到本地或者上传到服务器，就需要将 canvas 转换成二进制流，并将其存储或上传。
在这种情况下，我们可以使用一个名为 canvas-toBlob 的 npm 包，它可以将 canvas 转换成 Blob 对象并进行存储或上传。本文将介绍 canvas-toBlob 的使用教程，以及如何将其与其他前端技术一起使用。
安装与使用
安装
在使用 canvas-toBlob 之前，需要先将其安装到项目中。我们可以使用 npm 命令进行安装：
npm install canvas-toblob --save
使用
安装完成之后，我们就可以直接使用 canvas-toBlob 进行转换了。例如，我们将创建一个 canvas，并将它转换成 Blob 对象：
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ----- ------ - --------------------------------- ----- --- - ------------------------ ------------- - ------ --------------- -- ------------- --------------- ---------------------------- - -- -- --------- ---- ------ ---
在上述代码中，我们首先使用 import 语句引入了 canvas-toBlob 包，然后创建了一个 canvas，并在其中填充了红色的背景。接着，我们可以使用 canvas.toBlob() 方法将 canvas 转换成 Blob 对象，并在该方法的回调函数中进行处理。blob 参数即为转换后的 Blob 对象。
进阶使用
上述代码已经展示了 canvas-toBlob 的基本用法。但是，我们还可以通过设置一些参数来实现更为深入的操作。下面我们将介绍两个比较常用的参数。
type
在默认情况下，canvas.toBlob() 方法会将 canvas 转换成 PNG 格式的图片。但是，我们也可以通过设置 type 参数来指定其他格式，例如 JPEG、GIF 等。
例如，我们将把 canvas 转换成 JPEG 格式的图片：
canvas.toBlob(function(blob) {
// do something with `blob`
}, 'image/jpeg', 0.8);在上面的代码中，我们将 type 参数设置为 image/jpeg，表示将 canvas 转换成 JPEG 格式的图片。另外，我们还可以将图片的质量设置为 0.8，具体用法可以查看 toDataURL() 方法的文档。
encoderOptions
在默认情况下，canvas.toBlob() 方法会使用默认的编码器进行编码，从而创建一个 Blob 对象。但是，我们也可以通过设置 encoderOptions 参数来指定自己喜欢的编码器。
例如，我们将使用 WebP 编码器来对图片进行编码：
canvas.toBlob(function(blob) {
// do something with `blob`
}, 'image/webp', 0.8, {
encoderOptions: 0.5
});在上面的代码中，我们将 encoderOptions 参数设置为 0.5，表示将 WebP 图片的质量设置为 0.5。这个值的范围是 0 到 1 之间的浮点数。
示例
最后，我们来看一个完整的例子，这个例子演示了如何将 canvas 中的图片转换成 Base64 格式，并将其保存到本地：
-- -------------------- ---- -------
------ ------------ ---- ----------------
----- ------ - ---------------------------------
----- --- - ------------------------
------------- - ------
--------------- -- ------------- ---------------
---------------------------- -
----- ---------- - --- -------------
----------------- - ---------- -
----- ------------ - ------------------
----- - - ----------------------------
------ - -------------
---------- - ------------
----------
--
-------------------------------
---在上述代码中，我们将创建一个 canvas，并在其中填充了红色的背景。然后，我们将其转换成 Blob 对象，并将其转换成了 Base64 格式的字符串。接着，我们通过创建一个 <a> 标签的方式，将 Base64 字符串转换成了可下载的文件，并将其保存在本地。
结语
本文介绍了 npm 包 canvas-toBlob 的使用方法，包括基本用法和进阶用法。同时，我们还提供了一个示例代码，演示了如何将 canvas 中的图片转换成 Base64 格式，并将其保存到本地。希望本文能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c92ccdc64669dde5a79