在前端开发中，有时需要将图片转换为Base64字符串数据来在浏览器中显示，但当需要将这些图像保存到服务器端时，我们需要将其还原回原始的PNG格式。本文将介绍如何通过JavaScript将Base64字符串数据保存为PNG图像文件。
将Base64字符串数据转换为Blob对象
首先，我们需要将Base64字符串数据转换为Blob对象，这可以使用atob()函数和Uint8Array类型完成。以下是一个示例函数：
-- -------------------- ---- -------
-------- -------------------------- -
----- ------------ - -------------------
----- --- - --------------------
----- ----- - --- ----------------
--- ---- - - -- - - ---- ---- -
-------- - ---------------------------
-
------ --- ------------- - ----- ----------- ---
-该函数将接受一个Base64字符串作为参数，并返回一个Blob对象，其类型为“image/png”。
使用XMLHttpRequest或fetch将Blob对象发送到服务器
一旦我们有了Blob对象，我们就可以将其发送到服务器。这可以使用XMLHttpRequest或fetch方法完成。以下是一个使用XMLHttpRequest的示例代码：
-- -------------------- ---- -------
-------- --------------- -
----- --- - --- -----------------
---------------- ---------------
------------------------------------ ----------------------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------ ----- ----------------
-
--
---------------
-在此示例中，我们将Blob对象作为二进制流发送到服务器的“/save-image”端点。请注意，我们设置了“Content-Type”标头为“application/octet-stream”，这是告诉服务器我们正在发送一个二进制数据流。
将Base64字符串数据保存为PNG图像文件
现在，我们已经了解了如何将Base64字符串数据转换为Blob对象并将其发送到服务器，接下来我们需要将Blob对象保存为PNG图像文件。这可以使用Node.js中的File System API完成。以下是一个使用Node.js fs模块保存文件的示例代码：
-- -------------------- ---- -------
----- -- - --------------
-------- --------------- --------- -
----- ---------- - -------------------------------
-------------------------------
---------------------- --------------- -
------------------ ------ ------ -----------
--------------- ---------- -
------------------ ----- ------------ -- ---------------
---
-在此示例中，我们将Blob对象作为可读流，并使用fs.createWriteStream方法创建一个可写流，该流将数据写入指定的文件名。当可写流完成时，我们输出一个成功消息。请注意，我们需要使用blob.stream()获取可读流。
完整示例代码
以下是将Base64字符串数据保存为PNG图像文件的完整代码示例：
-- -------------------- ---- -------
-- ------- ------ ------ ---- -- ---- ------
-------- -------------------------- -
----- ------------ - -------------------
----- --- - --------------------
----- ----- - --- ----------------
--- ---- - - -- - - ---- ---- -
-------- - ---------------------------
-
------ --- ------------- - ----- ----------- ---
-
-- ---- ---- -- ------
-------- --------------- -
----- --- - --- -----------------
---------------- ---------------
------------------------------------ ----------------------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------ ----- ----------------
-
--
---------------
-
-- ---- ---- -- --- ----
----- -- - --------------
-------- --------------------- --------- -
----- ---------- - -------------------------------
-------------------------------
---------------------- --------------- -
------------------ ------ ------ -----------
--------------- ---------- -
------------------ ----- ------------ -- ---------------
---
-
-- ------- -----
----- ------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------