前言
image-output 是一个基于 Node.js 的 npm 包，用于将 canvas 生成的图片导出为文件或转化为 base64 编码。在前端开发中，经常会需要将生成的图片保存或上传至后端，这时候 image-output 可以帮助我们快速完成操作。
安装
在终端中输入以下命令即可安装 image-output：
npm install image-output
使用方法
image-output 的使用非常简单，只需调用其中的方法即可。下面将介绍其主要方法及使用方法。
toDataURL(canvas, type, quality)
toDataURL 方法用于将 canvas 生成的图片转化为 base64 编码。接收三个参数：
- canvas：生成的图片所对应的 canvas 对象；
- type：导出图片的格式，可取值为 "image/png"、"image/jpeg"、"image/webp"；
- quality：导出图片的质量，取值在 0 至 1 之间。
示例代码：
-- -------------------- ---- ------- ----- - ------------ - - ------------------ ----- ----------- - ------------------------ ----- ------ - ----------------- ----- ----- ------- - ------------------------ ----------------- - ------- ------------------- -- ---- ----- ----- ------ - ----------------------------- ------------ --- --------------------
执行上述代码，可得到输出结果：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAqUExURQAAAJDsbv+eBH10ev/LjZ/x8X+pkz/laL/jJ7+oa/+jJ7+oa/+jJ7+oa/+jJ7+oa/+jJ7+oa/+jJ7+oa/+jJ7+oa/+jJ7+oa/+jJ7+oa/+i5//8lG/+lG/+lG/+lG/+lG/+lG/+k5v/lpP/nZf/lpP/mZv/x8X+BeNkV7UAAACfSURBVHja7NLRDsAgCERmTlzuP9//T/NJr2LQuySSsWDyctm8oy7TpEwvZl4dWaQSQeScv1/AmpKRzYyMUtINxS1SvNJtSak0tjpOZd5SK0tFh5pKfg5O5L+/OpydGIPFHKLvjezgQe8xB/c1uH7fvGcRl/hV7gY/R6U+hV7gY/R6U+hV7gY/R6U+hV7gY/R6U+hV7gY/R6U+hV7gY/R6U+hV7gY/R6U+hV7gY/R6U+hV7gY/R6U+hV7gUr1+kuGIFTh0gAAAABJRU5ErkJggg==
toFile(canvas, type, quality, path)
toFile 方法用于将 canvas 生成的图片保存为文件。接收四个参数：
- canvas：生成的图片所对应的 canvas 对象；
- type：导出图片的格式，可取值为 "image/png"、"image/jpeg"、"image/webp"；
- quality：导出图片的质量，取值在 0 至 1 之间；
- path：保存图片的路径。
示例代码：
-- -------------------- ---- -------
----- - ------------ - - ------------------
----- ----------- - ------------------------
----- -- - --------------
----- ------ - ----------------- -----
----- ------- - ------------------------
----------------- - -------
------------------- -- ---- -----
-------------------------- ------------ -- -------------
-------- -- -
--------------------
--
------------ -- -
------------------- -----
---执行上述代码，可在当前目录下生成 test.png 文件。
总结
通过本文的介绍，我们了解到了 image-output 的使用方法，包括将 canvas 生成的图片转化为 base64 编码和将其保存为文件。在前端开发中，image-output 可以方便地完成图片导出操作，提高效率，同时也可以作为学习 Node.js 的实践案例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf66b5cbfe1ea0611015