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

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

问题:将图片转成datauri

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

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

实现思路

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

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

data:,

具体到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

然后在浏览器访问 http://127.0.0.1:3000,就可以看到效果 :)

相关链接

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

相关文章
|
7月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
177 0
|
7月前
|
JavaScript 前端开发
nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件
nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件
|
3月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
64 1
|
3月前
|
前端开发 JavaScript
node接收前端上传的图片,单文件、多文件同name、多文件不同name
本文介绍了在Node.js中使用multer模块接收前端上传的图片,包括单文件上传、多文件上传(同name和不同name)以及任意类型文件上传的方法。
103 0
|
5月前
【node】图片验证码(svg-captcha)
【node】图片验证码(svg-captcha)
304 0
|
6月前
|
数据采集 存储 编解码
技术笔记:Node.jsmm131图片批量下载爬虫1.01增加断点续传功能
技术笔记:Node.jsmm131图片批量下载爬虫1.01增加断点续传功能
108 0
|
6月前
|
数据采集 Web App开发 XML
详尽分享用Node.js写爬虫,撸羞羞的图片
详尽分享用Node.js写爬虫,撸羞羞的图片
40 0
|
7月前
|
编解码 前端开发 JavaScript
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)
338 1
【Node-图片上传】
【Node-图片上传】
63 0
|
7月前
|
前端开发
【Node】一键生成博客标题图片
还在为写文章时找不到标题图片而困扰吗?举个例子,CSDN的博客文章如果你不给他图片的话,那么它会按照一些默认的标签图片作为你的文章封面,例如下面这样。
65 7