拓冰网站定制 
文档教程后端【免费下载链接】nodejs-learning-guideNodejs学习笔记以及经验总结公众号程序猿小卡项目地址https://gitcode.com/gh_mirrors/no/nodejs-learning-guide点击查看免费下载本文围绕 GitHub 加速计划 / no 项目 nodejs-learning-guide 中《将图片转成 datauri 嵌入 html》一文的完整主题展开介绍如何用 Node.js 将本地图片文件读取为二进制数据再编码为 Base64 字符串最终拼接成可直接嵌入网页img标签的 Data URI。读完本文你将掌握fs.readFileSyncBuffer.toString(base64)这一最小实现链路并能把它扩展成一段可直接运行的 HTTP 服务将图片以 DataURI 形式内联到 HTML 页面中适合用于富文本、邮件正文、离线页面等不便外链图片资源的场景。问题来源如何把图片“嵌进”网页本主题最初源于一次开发者社区的真实提问见 assets/base64.png在 QQ 群里有人问到“nodejs 读取图片转成 base64怎么读取呢”。这个问题的本质并不是单纯想知道“如何输出一段 Base64 字符串”而是希望把图片以数据形式内嵌到网页中去——也就是把图片转换成对应的 Data URIdatauri。这种做法的典型价值在于图片不再依赖独立的 URL 请求而是直接随 HTML 一并传输从而减少 HTTP 请求数、便于离线查看或嵌入富文本内容。原文档作者快速实现了一个简单 demo 并记录在仓库中对应示例位于 examples/2016.11.15-base64-datauri。实现思路三步走整个转换思路非常直观只有三个步骤读取图片二进制数据—— 用fs.readFileSync得到图片文件的二进制内容在 Node.js 中表现为Buffer对象转成 Base64 字符串—— 通过Buffer.toString(base64)将二进制字节编码为 Base64 文本拼成 Data URI—— 按 Data URI 的规范格式拼接出最终字符串。关于 Base64 编码本身它是一套用 64 个可打印字符A-Z、a-z、0-9、、/以及末尾可能出现的填充符来表示任意二进制数据的编码方案常用于在文本协议中安全地传输二进制内容。而Data URI 的标准格式如下data:[mediatype][;base64],data其中各段含义为片段含义data:固定协议前缀标识这是一个数据 URI[mediatype]媒体类型MIME type如image/png、image/jpeg、text/plain可省略[;base64]可选标记表示data部分是 Base64 编码的二进制数据,data逗号分隔符之后即实际数据Base64 字符串或文本内容具体到一张 PNG 图片拼出来的 Data URI 大致如下其中xxx就是前面得到的 Base64 字符串data:image/png;base64, xxx最小实现三步代码全解析下面按原文档的步骤逐一给出可运行的代码。第一步读取本地图片的二进制数据var fs require(fs); var filepath ./1.png; var bData fs.readFileSync(filepath);fs.readFileSync以同步方式读取文件返回的是Buffer对象即图片文件的原始字节序列。注意这里不要传入encoding参数否则读取结果会直接变成字符串也就丢失了后续按 Base64 编码的基础。第二步把二进制数据转换成 Base64 字符串var base64Str bData.toString(base64);Buffer.toString([encoding[, start[, end]]])负责把 Buffer 解码成字符串encoding决定解码方式常见取值有utf8、ascii、base64、hex等默认是utf8。这里显式传入base64即把二进制字节按 Base64 规则编码成字符串。关于Buffer.toString的更多用法可以参考仓库内 模块/buffer.md如buf.toString(utf8, 0, 2)这种带起始位置的切片解码示例。第三步拼接成 Data URIvar datauri data:image/png;base64, base64Str;把 Data URI 固定前缀、图片的 MIME 类型与 Base64 字符串拼接即可。如果图片是 JPEG前缀则相应换成data:image/jpeg;base64,。完整示例与仓库 examples/2016.11.15-base64-datauri/base64.js 中的实现完全一致代码非常精简var fs require(fs); var filepath ./1.png; var bData fs.readFileSync(filepath); var base64Str bData.toString(base64); var datauri data:image/png;base64, base64Str; console.log(datauri);运行后会直接在终端输出一长串data:image/png;base64,....字符串。实战扩展把 DataURI 嵌入 HTML 并启动 HTTP 服务仅仅打印出字符串还不够直观仓库中的 examples/2016.11.15-base64-datauri/server.js 给出了一个更完整的实战版本它用http模块起了一个监听 3000 端口的服务把图片转成的 DataURI 直接替换进 HTML 模板的img标签中返回给浏览器。var fs require(fs); var http require(http); var tmpl !DOCTYPE html\ html\ head\ titledatauri例子/title\ /head\ body\ img src$datauri /\ /body\ /html; var server http.createServer(function(req, res){ var filepath ./1.png; var bData fs.readFileSync(filepath); var base64Str bData.toString(base64); var datauri data:image/png;base64, base64Str; res.end( tmpl.replace($datauri, datauri) ); }); server.listen(3000);这个版本把“读取 → 编码 → 拼接”三步骤封装在请求回调里并用tmpl.replace($datauri, datauri)把模板中的占位符替换成真实的 DataURI。浏览器解析img srcdata:image/png;base64,...时会直接解码 Base64 数据显示图片不再发起额外的图片请求。运行与验证在仓库内进入对应示例目录并启动服务cd examples/2016.11.15-base64-datauri node server.js然后在浏览器访问 http://127.0.0.1:3000即可看到页面中渲染出内嵌的图片。示例目录中的 1.png 就是被转换的源图片。如果你希望从仓库整体克隆后自行实验也可以执行git clone https://gitcode.com/gh_mirrors/no/nodejs-learning-guide.git cd nodejs-learning-guide/examples/2016.11.15-base64-datauri node server.js原理补充为什么toString(base64)能完成转换从源码层面看这背后依赖的是 Node.js 的Buffer机制。fs.readFileSync(filepath)不带编码参数时返回Buffer它是一段与图片文件字节一一对应的内存二进制数据随后Buffer.toString(base64)把每个 3 字节的二进制分组映射为 4 个 Base64 字符不足 3 字节时补从而得到可安全嵌入文本协议的 Base64 字符串。仓库 模块/buffer.md 中系统整理了 Buffer 的创建、转字符串、切片解码等用法例如Buffer.from(string[, encoding])创建 Buffer 时若编码不一致会出现乱码反过来也说明编码与解码必须一一对应——这也是此处必须显式传入base64而非使用默认utf8的原因对图片这种非文本二进制按utf8解码会产生乱码而按base64解码则能完整还原二进制语义。使用建议与注意事项MIME 类型要匹配Data URI 前缀中的image/png、image/jpeg等必须与图片实际格式一致否则部分浏览器可能无法正确渲染。体积膨胀Base64 编码会使数据体积比原始二进制增大约 1/3data:前缀本身也有开销。小图标、缩略图适合内联超大图片建议仍走独立静态资源路径。适合内联的场景离线 HTML、邮件正文、富文本快照、减少小图片的请求数等需要反复动态生成时可以只做一次转换后缓存 DataURI 字符串。同步与异步取舍示例中为演示简洁使用了fs.readFileSync生产环境对高频请求建议改用fs.readFile异步版本避免阻塞事件循环。小结本主题的核心链路极短fs.readFileSync拿到二进制 Buffer →toString(base64)编码 → 拼接data:image/png;base64,前缀。配合仓库中 base64.js 与 server.js 两个可直接运行的示例你可以快速把任意图片内联进网页。想深入了解 Buffer 解码规则可继续阅读仓库内的 模块/buffer.md 与 2016.12.27-buffer 示例集。赞分享文档教程后端【免费下载链接】nodejs-learning-guideNodejs学习笔记以及经验总结公众号程序猿小卡项目地址https://gitcode.com/gh_mirrors/no/nodejs-learning-guide点击查看免费下载相关推荐WinSW两种使用模式详解全局工具与捆绑部署到底怎么选WinSW两种使用模式详解全局工具与捆绑部署到底怎么选 WinSWWindows Service Wrapper是一个采用 MIT 宽松许可证的免费包装文档教程后端Node.js path 模块全解路径获取、组合、解析与平台差异实战nodejs-learning-guideNode.js path 模块全解路径获取、组合、解析与平台差异实战nodejs learning guide 本篇指南以 nodejs learning文档教程后端html-to-image 中的图片嵌入技术base64 与 dataURL 应用html to image 中的图片嵌入技术base64 与 dataURL 应用 引言前端图片嵌入的痛点与解决方案 你是否曾遇到过这些问题生成的网页截图前端图像处理上一篇掌握Ghost主题维护Casper与Source主题的7个实用技巧下一篇打造专业视频编辑App时间线基于android-advancedrecyclerview的终极拖拽实现指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Node.js 实战：读取图片并转换为 Base64 DataURI 嵌入 HTML（nodejs-learning-guide）
文档教程后端【免费下载链接】nodejs-learning-guideNodejs学习笔记以及经验总结公众号程序猿小卡项目地址https://gitcode.com/gh_mirrors/no/nodejs-learning-guide点击查看免费下载本文围绕 GitHub 加速计划 / no 项目 nodejs-learning-guide 中《将图片转成 datauri 嵌入 html》一文的完整主题展开介绍如何用 Node.js 将本地图片文件读取为二进制数据再编码为 Base64 字符串最终拼接成可直接嵌入网页img标签的 Data URI。读完本文你将掌握fs.readFileSyncBuffer.toString(base64)这一最小实现链路并能把它扩展成一段可直接运行的 HTTP 服务将图片以 DataURI 形式内联到 HTML 页面中适合用于富文本、邮件正文、离线页面等不便外链图片资源的场景。问题来源如何把图片“嵌进”网页本主题最初源于一次开发者社区的真实提问见 assets/base64.png在 QQ 群里有人问到“nodejs 读取图片转成 base64怎么读取呢”。这个问题的本质并不是单纯想知道“如何输出一段 Base64 字符串”而是希望把图片以数据形式内嵌到网页中去——也就是把图片转换成对应的 Data URIdatauri。这种做法的典型价值在于图片不再依赖独立的 URL 请求而是直接随 HTML 一并传输从而减少 HTTP 请求数、便于离线查看或嵌入富文本内容。原文档作者快速实现了一个简单 demo 并记录在仓库中对应示例位于 examples/2016.11.15-base64-datauri。实现思路三步走整个转换思路非常直观只有三个步骤读取图片二进制数据—— 用fs.readFileSync得到图片文件的二进制内容在 Node.js 中表现为Buffer对象转成 Base64 字符串—— 通过Buffer.toString(base64)将二进制字节编码为 Base64 文本拼成 Data URI—— 按 Data URI 的规范格式拼接出最终字符串。关于 Base64 编码本身它是一套用 64 个可打印字符A-Z、a-z、0-9、、/以及末尾可能出现的填充符来表示任意二进制数据的编码方案常用于在文本协议中安全地传输二进制内容。而Data URI 的标准格式如下data:[mediatype][;base64],data其中各段含义为片段含义data:固定协议前缀标识这是一个数据 URI[mediatype]媒体类型MIME type如image/png、image/jpeg、text/plain可省略[;base64]可选标记表示data部分是 Base64 编码的二进制数据,data逗号分隔符之后即实际数据Base64 字符串或文本内容具体到一张 PNG 图片拼出来的 Data URI 大致如下其中xxx就是前面得到的 Base64 字符串data:image/png;base64, xxx最小实现三步代码全解析下面按原文档的步骤逐一给出可运行的代码。第一步读取本地图片的二进制数据var fs require(fs); var filepath ./1.png; var bData fs.readFileSync(filepath);fs.readFileSync以同步方式读取文件返回的是Buffer对象即图片文件的原始字节序列。注意这里不要传入encoding参数否则读取结果会直接变成字符串也就丢失了后续按 Base64 编码的基础。第二步把二进制数据转换成 Base64 字符串var base64Str bData.toString(base64);Buffer.toString([encoding[, start[, end]]])负责把 Buffer 解码成字符串encoding决定解码方式常见取值有utf8、ascii、base64、hex等默认是utf8。这里显式传入base64即把二进制字节按 Base64 规则编码成字符串。关于Buffer.toString的更多用法可以参考仓库内 模块/buffer.md如buf.toString(utf8, 0, 2)这种带起始位置的切片解码示例。第三步拼接成 Data URIvar datauri data:image/png;base64, base64Str;把 Data URI 固定前缀、图片的 MIME 类型与 Base64 字符串拼接即可。如果图片是 JPEG前缀则相应换成data:image/jpeg;base64,。完整示例与仓库 examples/2016.11.15-base64-datauri/base64.js 中的实现完全一致代码非常精简var fs require(fs); var filepath ./1.png; var bData fs.readFileSync(filepath); var base64Str bData.toString(base64); var datauri data:image/png;base64, base64Str; console.log(datauri);运行后会直接在终端输出一长串data:image/png;base64,....字符串。实战扩展把 DataURI 嵌入 HTML 并启动 HTTP 服务仅仅打印出字符串还不够直观仓库中的 examples/2016.11.15-base64-datauri/server.js 给出了一个更完整的实战版本它用http模块起了一个监听 3000 端口的服务把图片转成的 DataURI 直接替换进 HTML 模板的img标签中返回给浏览器。var fs require(fs); var http require(http); var tmpl !DOCTYPE html\ html\ head\ titledatauri例子/title\ /head\ body\ img src$datauri /\ /body\ /html; var server http.createServer(function(req, res){ var filepath ./1.png; var bData fs.readFileSync(filepath); var base64Str bData.toString(base64); var datauri data:image/png;base64, base64Str; res.end( tmpl.replace($datauri, datauri) ); }); server.listen(3000);这个版本把“读取 → 编码 → 拼接”三步骤封装在请求回调里并用tmpl.replace($datauri, datauri)把模板中的占位符替换成真实的 DataURI。浏览器解析img srcdata:image/png;base64,...时会直接解码 Base64 数据显示图片不再发起额外的图片请求。运行与验证在仓库内进入对应示例目录并启动服务cd examples/2016.11.15-base64-datauri node server.js然后在浏览器访问 http://127.0.0.1:3000即可看到页面中渲染出内嵌的图片。示例目录中的 1.png 就是被转换的源图片。如果你希望从仓库整体克隆后自行实验也可以执行git clone https://gitcode.com/gh_mirrors/no/nodejs-learning-guide.git cd nodejs-learning-guide/examples/2016.11.15-base64-datauri node server.js原理补充为什么toString(base64)能完成转换从源码层面看这背后依赖的是 Node.js 的Buffer机制。fs.readFileSync(filepath)不带编码参数时返回Buffer它是一段与图片文件字节一一对应的内存二进制数据随后Buffer.toString(base64)把每个 3 字节的二进制分组映射为 4 个 Base64 字符不足 3 字节时补从而得到可安全嵌入文本协议的 Base64 字符串。仓库 模块/buffer.md 中系统整理了 Buffer 的创建、转字符串、切片解码等用法例如Buffer.from(string[, encoding])创建 Buffer 时若编码不一致会出现乱码反过来也说明编码与解码必须一一对应——这也是此处必须显式传入base64而非使用默认utf8的原因对图片这种非文本二进制按utf8解码会产生乱码而按base64解码则能完整还原二进制语义。使用建议与注意事项MIME 类型要匹配Data URI 前缀中的image/png、image/jpeg等必须与图片实际格式一致否则部分浏览器可能无法正确渲染。体积膨胀Base64 编码会使数据体积比原始二进制增大约 1/3data:前缀本身也有开销。小图标、缩略图适合内联超大图片建议仍走独立静态资源路径。适合内联的场景离线 HTML、邮件正文、富文本快照、减少小图片的请求数等需要反复动态生成时可以只做一次转换后缓存 DataURI 字符串。同步与异步取舍示例中为演示简洁使用了fs.readFileSync生产环境对高频请求建议改用fs.readFile异步版本避免阻塞事件循环。小结本主题的核心链路极短fs.readFileSync拿到二进制 Buffer →toString(base64)编码 → 拼接data:image/png;base64,前缀。配合仓库中 base64.js 与 server.js 两个可直接运行的示例你可以快速把任意图片内联进网页。想深入了解 Buffer 解码规则可继续阅读仓库内的 模块/buffer.md 与 2016.12.27-buffer 示例集。赞分享文档教程后端【免费下载链接】nodejs-learning-guideNodejs学习笔记以及经验总结公众号程序猿小卡项目地址https://gitcode.com/gh_mirrors/no/nodejs-learning-guide点击查看免费下载相关推荐WinSW两种使用模式详解全局工具与捆绑部署到底怎么选WinSW两种使用模式详解全局工具与捆绑部署到底怎么选 WinSWWindows Service Wrapper是一个采用 MIT 宽松许可证的免费包装文档教程后端Node.js path 模块全解路径获取、组合、解析与平台差异实战nodejs-learning-guideNode.js path 模块全解路径获取、组合、解析与平台差异实战nodejs learning guide 本篇指南以 nodejs learning文档教程后端html-to-image 中的图片嵌入技术base64 与 dataURL 应用html to image 中的图片嵌入技术base64 与 dataURL 应用 引言前端图片嵌入的痛点与解决方案 你是否曾遇到过这些问题生成的网页截图前端图像处理上一篇掌握Ghost主题维护Casper与Source主题的7个实用技巧下一篇打造专业视频编辑App时间线基于android-advancedrecyclerview的终极拖拽实现指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考