当前位置: 首页 > 后端技术 > Node.js

Nodejs进阶:如何将图片转成datauri并嵌入到网页中

时间:2023-04-03 12:43:00 Node.js

本文节选自《Nodejs学习笔记》,更多章节和更新请访问github主页地址。问题:图片转datauri今天QQ群里有个群友问了一个问题:nodejs读取图片转成base64,如何读取?想了想,他想问的应该是如何将图片Embed到网页中,也就是如何将图片转换成对应的datauri。这是一个很好的问题,也是一个非常常用的功能。很快就实现了一个简单的demo,这里顺便记录一下。实现思路很直观:1.读取图片的二进制数据->2.转成base64字符串->3.转成datauri。base64的介绍可以参考阮一峰老师的文章。datauri的格式如下data:,具体到png图片,大致如下,其中“xxx”为前面的base64字符串。接下来我们看看data:image/png;base64,xxx在nodejs中是如何实现的。首先读取本地图片的二进制数据。varfs=require('fs');varfilepath='./1.png';varbData=fs.readFileSync(filepath);然后,将二进制数据转换为base64编码的字符串。varbase64Str=bData.toString('base64');最后,转换为datauri格式。vardatauri='data:image/png;base64,'+base64Str;完整的示例代码如下,代码很少:varfs=require('fs');varfilepath='./1.png';varbData=fs.readFileSync(filepath);varbase64Str=bData.toString('base64');vardatauri='data:image/png;base64,'+base64Str;控制台日志(datauri);githubdemo地址demo地址请点这里,或者gitclonehttps://github.com/chyingp/nodejs-learning-guide.gitcdnodejs-learning-guide/examples/2016.11.15-base64-dataurinodeserver.js然后访问浏览器中http://127.0.0.1:3000,可以看到效果:)相关链接Base64注释:http://www.ruanyifeng.com/blo...数据URIs:https://developer.mozilla。组织...