在前端开发中，我们经常需要在网页中处理图片。其中，base64 格式的图片是一种常见的表示方式。但是有些情况下，我们需要将 base64 格式的图片转换成 Blob 对象，便于处理和传输。这时，我们可以使用一个 npm 包：b64-to-blob。
什么是 b64-to-blob
b64-to-blob 是一个能够将 base64 格式的图片转换成 Blob 对象的 npm 包。它支持浏览器环境和 Node.js 环境，并且体积轻盈，使用简单方便。
安装和使用
安装
我们可以通过 npm 安装 b64-to-blob：
npm install b64-to-blob
使用
在浏览器环境下，我们可以直接在网页中引入 b64-to-blob：
<script src="node_modules/b64-to-blob/browser.js"></script>
然后就可以使用以下方式将 base64 格式的图片转换成 Blob 对象：
// 将 base64 格式的图片转换成 Blob 对象 var blob = b64toBlob(base64Data, contentType); // 通过 URL.createObjectURL() 方法生成 Blob 对象的 url var url = URL.createObjectURL(blob);
在 Node.js 环境下，我们可以使用以下方式引入 b64-to-blob：
var b64toblob = require('b64-to-blob');然后同样可以使用 b64toBlob() 方法将 base64 格式的图片转换成 Blob 对象。
示例代码
以下是一个完整的示例代码，展示了如何将 base64 格式的图片转换成 Blob 对象，并在网页中展示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ----------
-------
------
---- ------ ---------
------- ---------------------------------------------------
--------
-- ------ ------ -----
------------------
------------------------ -
------ ----------------
--
-------------------------- -
-- - ------ -------- ---- --
--- ---- - --------------------- --------------
-- -- --------------------- ---- ---- --- ---
--- --- - --------------------------
-- --------
--- --- - ------------------------------
------- - ----
---
---------
-------
-------在该示例中，我们首先从服务器获取 base64 格式的图片，然后使用 b64-to-blob 将其转换成 Blob 对象，并通过 URL.createObjectURL() 方法生成 Blob 对象的 url，最后在网页中展示图片。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedab19b5cbfe1ea0610662