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的前后端分离的思考与实践(三)轻量级的接口配置建模框架
Sep 26 NodeJs
轻松创建nodejs服务器(10):处理POST请求
Dec 18 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
利用nodejs监控文件变化并使用sftp上传到服务器
Feb 18 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
NodeJs安装npm包一直失败的解决方法
Apr 28 NodeJs
nodejs处理图片的中间件node-images详解
May 08 NodeJs
nodejs实现爬取网站图片功能
Dec 14 NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 NodeJs
浅谈vue websocket nodeJS 进行实时通信踩到的坑
Sep 22 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桌面中心(一) 创建数据库
2007/03/11 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Django的models中on_delete参数详解
2019/07/16 Python
python解析多层json操作示例
2019/12/30 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
struct和class的区别
2015/11/20 面试题
七年级生物教学反思
2014/01/30 职场文书
农村党员一句话承诺
2014/05/30 职场文书
六一亲子活动感想
2015/08/07 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫