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


Posted in NodeJs onNovember 21, 2016

问题:将图片转成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);

demo地址

demo地址请点击这里

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs教程之入门
Nov 21 NodeJs
轻松创建nodejs服务器(2):nodejs服务器的构成分析
Dec 18 NodeJs
NodeJS制作爬虫全过程
Dec 22 NodeJs
nodejs爬虫抓取数据乱码问题总结
Jul 03 NodeJs
详解NodeJs支付宝移动支付签名及验签
Jan 06 NodeJs
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
May 13 NodeJs
Nodejs搭建wss服务器教程
May 24 NodeJs
nodejs中密码加密处理操作详解
Mar 20 NodeJs
基于nodejs res.end和res.send的区别
May 14 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
Nodejs监听日志文件的变化的过程解析
Aug 04 NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 #NodeJs
NodeJS中的MongoDB快速入门详细教程
Nov 11 #NodeJs
Nodejs中解决cluster模块的多进程如何共享数据问题
Nov 10 #NodeJs
NodeJS整合银联网关支付(DEMO)
Nov 09 #NodeJs
nodejs的HTML分析利器node-jquery用法浅析
Nov 08 #NodeJs
Jquery通过ajax请求NodeJS返回json数据实例
Nov 08 #NodeJs
NodeJS和BootStrap分页效果的实现代码
Nov 07 #NodeJs
You might like
JS实现php的伪分页
2008/05/25 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
基于JQuery的日期联动实现代码
2011/02/24 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
python实现超市扫码仪计费
2018/05/30 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
上海中网科技笔试题
2012/02/19 面试题
军训生自我鉴定范文
2013/12/27 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
公司保密承诺书
2014/03/27 职场文书
经费申请报告范文
2015/05/18 职场文书
mysql如何查询连续记录
2022/05/11 MySQL