什么是 zfm20image2base64？
zfm20image2base64 是一个 npm 包，可以将图片转换成 base64 字符串。使用者可以通过简单的函数调用，将图片转换成 base64 编码的字符串，方便在前端进行各种操作，例如：动态加载图片、将图片存储到本地等。
安装
安装 zfm20image2base64 非常简单，只需要在命令行输入以下命令即可：
npm install zfm20image2base64 --save
使用方法
在项目的代码中，可以通过以下方式引入 zfm20image2base64：
const zfm20image2base64 = require('zfm20image2base64')可以通过以下方式将图片转换成 base64 编码的字符串：
zfm20image2base64.getImageBase64('imagePath')
.then(base64String => {
// 在这里可以执行各种操作
})
.catch(error => {
console.log(error)
})其中 getImageBase64 函数接收一个参数，代表需要转换为 base64 字符串的图片的路径。Promise 的 resolve 函数中返回一个 base64 编码的字符串，可以通过 then() 函数进行处理。
深度解析
zfm20image2base64 使用了 Node.js 的 fs 模块，可以直接读取图片的二进制数据。图片二进制数据可以通过 base64 编码进行处理，并且可以通过 Data URI Scheme 进行显示或使用。
使用 Data URI Scheme 是一个常见的技巧，可以通过将 base64 编码的图片数据嵌入在 HTML、CSS 或 JavaScript 文件中，直接在网页中进行显示或操作。这种方式可以减少 HTTP 请求次数，提高页面性能和速度。
以下代码演示如何使用 Data URI Scheme 将图片显示在网页中：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABwCAIAAAAp+2xAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABDUlEQVRoge3aTWqDQBCF4Q9e/KuOhBEVcQOirgol7SFyXiJPxKeH7VCRxJgZRoN9ZkUTzjbPt5Sz6+5U5/o+c+eSx/RHpuQk1+hav49vDOWyy4WlyRHprQnXXPFG46NBvq8Ad1WxE32FdLJ99ncooNHvB8l9tt/KeEpFHkwrlChz5O5UeSjU6BxN6O5UfSjU4BxXaO5UfajUOBvq8A92WpxGikxptyx0m22kBvq0AvdWDEdTp1jKbmyhxMyeyw0nHs8NGKjxseztPjxbq3Ul+xpfZ9dUtfxpvJrybv7QdstdfFXyPyyVzlP0xhnfKj+B1Et53ZyeleXAAAAAElFTkSuQmCC">
在 img 标签中的 src 属性中，data:image/png;base64, 代表图片的 MIME 类型和 base64 编码的开始标记。其余的就是 base64 编码的图片数据了。
示例代码
生成 Data URI Scheme
-- -------------------- ---- ------- ----- ----------------- - ---------------------------- ----------------------------------------------------- ------------------ -- - ----- -------- - ------------ ----- ------- - ----------------------------------------- -------------------- -- ------------ -- - ------------------ --
在页面中显示图片
-- -------------------- ---- -------
--------- -----
------
------
------------------------ ----------
-------
------
---- ------ ---------- --
------- --------------------------------------------
--------
----- ----- - --------------------------------
-----------------------------------------------------
------------------ -- -
----- -------- - ------------
----- ------- - -----------------------------------------
--------- - -------
--
------------ -- -
------------------
--
---------
-------
-------总结
zfm20image2base64 是一个非常实用的 npm 包，可以帮助前端开发者将图片转换成 base64 编码的字符串，提高页面性能和速度。使用该包可以实现各种操作，如动态加载图片、将图片存储到本地等。同时，也可以使用 Data URI Scheme 将 base64 编码的图片数据直接嵌入到 HTML、CSS 或 JavaScript 文件中，减少 HTTP 请求次数，提高页面性能和速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbdfc