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命令行参数处理模块commander使用实例
Sep 17 NodeJs
使用DNode实现php和nodejs之间通信的简单实例
Jul 06 NodeJs
Nodejs 搭建简单的Web服务器详解及实例
Nov 30 NodeJs
Mac 安装 nodejs方法(图文详细步骤)
Oct 30 NodeJs
nodejs前端模板引擎swig入门详解
May 15 NodeJs
NodeJs项目中关闭ESLint的方法
Aug 09 NodeJs
详解NodeJS Https HSM双向认证实现
Mar 12 NodeJs
nodejs中各种加密算法的实现详解
Jul 11 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
nodejs对mongodb数据库的增加修删该查实例代码
Jan 05 NodeJs
nodejs+express最简易的连接数据库的方法
Dec 23 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 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
php防止sql注入代码实例
2013/12/18 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
php检查页面是否被百度收录
2015/10/28 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
Script的加载方法小结
2011/01/12 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
论文评语大全
2014/04/29 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
服务整改报告
2014/11/06 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书