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

简介: 今天,在express/node交流群里,有个群友问了个问题:“nodejs读取图片,转成base64,怎么读取呢?” 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即如何把图片转成对应的 datauri。 是个不错的问题,而且也是个很常用的功能。快速实现了个简单的demo,这里顺便记

问题:将图片转成datauri

今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成base64,怎么读取呢?” 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即如何把图片转成对应的 datauri。

是个不错的问题,而且也是个很常用的功能。快速实现了个简单的demo,这里顺便记录一下。

实现思路

思路很直观:1、读取图片二进制数据 -> 2、转成base64字符串 -> 3、转成datauri。

关于base64的介绍,可以参考阮一峰老师的文章。而 datauri 的格式如下

data:[][;base64],

具体到png图片,大概如下,其中 “xxx” 就是前面的base64字符串了。接下来,我们看下在nodejs里该如何实现

data: image/png;base64, xxx

具体实现

首先,读取本地图片二进制数据。

var fs = require('fs');
var filepath = './1.png';

var bData = fs.readFileSync(filepath);

然后,将二进制数据转换成base64编码的字符串。

var base64Str = bData.toString('base64');

最后,转换成datauri的格式。

var datauri = 'data:image/png;base64,' + base64Str;

完整例子代码如下,代码非常少:

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);

github demo地址

demo地址请点击这里,或者

git clone https://github.com/chyingp/nodejs-learning-guide.git
cd nodejs-learning-guide/examples/2016.11.15-base64-datauri
node server.js

然后在浏览器访问

相关链接

Base64笔记:http://www.ruanyifeng.com/blog/2008/06/base64.html
Data URIs:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

相关文章
|
存储 网络协议 物联网
Android集成MQTT教程:实现高效通信和实时消息传输
Android集成MQTT教程:实现高效通信和实时消息传输
3416 0
|
8月前
|
存储 Java 文件存储
微服务——SpringBoot使用归纳——Spring Boot使用slf4j进行日志记录—— logback.xml 配置文件解析
本文解析了 `logback.xml` 配置文件的详细内容,包括日志输出格式、存储路径、控制台输出及日志级别等关键配置。通过定义 `LOG_PATTERN` 和 `FILE_PATH`,设置日志格式与存储路径;利用 `<appender>` 节点配置控制台和文件输出,支持日志滚动策略(如文件大小限制和保存时长);最后通过 `<logger>` 和 `<root>` 定义日志级别与输出方式。此配置适用于精细化管理日志输出,满足不同场景需求。
2091 1
InputStream,String,File相互转化
InputStream,String,File相互转化
180 3
|
8月前
|
Dubbo 应用服务中间件 Apache
Star 4w+,Apache Dubbo 3.3 全新发布,Triple X 领衔,开启微服务通信新时代
Star 4w+,Apache Dubbo 3.3 全新发布,Triple X 领衔,开启微服务通信新时代
144 0
Echarts中横坐标文字显示不全
本文讨论了在ECharts中横坐标文字显示不全的问题,并通过设置`xAxis`的`axisLabel.interval`属性为`0`来解决。这样设置后,横坐标上的所有标签都会显示,而不会根据自动计算的间隔来显示部分标签。文章提供了问题的具体示例图片和解决方法,并附有官方文档链接。
1251 4
Echarts中横坐标文字显示不全
|
11月前
|
监控 API 开发者
Sentinel:微服务的全能守护
Sentinel 是阿里巴巴开源的一款轻量级流量控制和熔断降级框架。它通过设置流量控制、熔断降级和系统保护规则,确保微服务在高并发场景下稳定运行。Sentinel 提供丰富的功能、实时监控和灵活的集成方式,适用于各种分布式系统。
1538 0
|
缓存 安全 JavaScript
掌握JAMstack:构建更快、更安全的Web应用
JAMstack 是一种现代 Web 开发架构,结合 JavaScript、APIs 和 Markup,创建更快、更安全的 Web 应用。其核心优势包括高性能、安全性、可扩展性和易维护性。JAMstack 通过预构建静态页面和 API 实现高效渲染,利用静态站点生成器如 Gatsby 和 Next.js,并借助 CDN 和缓存策略提升全球访问速度。尽管面临复杂交互、SEO 和数据更新等挑战,但通过 Serverless Functions、预渲染和实时 API 更新等方案,这些挑战正逐步得到解决。
|
监控 Java API
Spring Cloud 之 GateWay
Spring Cloud Gateway 作为API网关,处理客户端与微服务间的非业务逻辑,如权限验证、监控、路由转发。它通过Route(含ID、目标URI、Predicate和Filter)、Predicate(匹配请求条件)和Filter(请求前/后处理)实现动态路由。工作流程包括客户端请求->Gateway Handler Mapping->过滤器链->服务转发->响应过滤->回客户端。过滤器用于请求拦截、响应处理,如参数校验、权限检查。动态路由允许以服务名创建路由,实现服务发现。预设和全局过滤器用于特定或所有路由的定制逻辑,例如登录验证和请求头管理。
|
监控 Java API
|
消息中间件 Java RocketMQ
Spring Boot与RocketMQ的集成
Spring Boot与RocketMQ的集成

热门文章

最新文章