使用Node.js实现base64和png文件相互转换的方法


Posted in Javascript onMarch 11, 2020

前天浏览技术博客,看到大厂面试题型中有使用nodejs实现base64和图片文件相互转换的例子,刚好近期要开发这个功能,暂时记录下来,下周开发完成再做一个补充。

1. 将base64 转换为图片文件,这里举例用的png文件

const fs = require('fs');
const path = 'xxx/'+ Date.now() +'.png';
const base64 = data.replace(/^data:image\/\w+;base64,/,""); //去掉图片base64码前面部分data:image/png;base64
// new Buffer 操作权限太大,v6.0后使用Buffer.from()创建构造函数
const dataBuffer = new Buffer(base64, 'base64'); //把base64码转成buffer对象,
fs.writeFile(path, dataBuffer, function(err){//用fs写入文件
 if(err){
  console.log(err);
 }else{
  console.log('写入成功!');
 }
})

创建Buffer
类型:类整数数组
原因:JavaScript 语言自身只有字符串数据类型,没有二进制数据类型。但在处理像TCP流或文件流时(base64即文件流),必须使用到二进制数据。因此在 Node.js中,定义了一个Buffer类,该类用来创建一个专门存放二进制数据的缓存区。

常用

const buf = Buffer.from(string, encoding); // 返回一个被 string,编码格式是base64(默认编码格式是utf-8)的值初始化的新的 Buffer 实例
buf.toJSON(); // 转换为JSON对象
buf.write(string, offset, length, encoding) // 写入node缓存区
buf.toString(encoding, start, end) // 从缓存区读取数据

2.将图片文件转换成base64

const fs = require("fs");
const util = require("util");
const imageData = await util.promisify(fs.readFileSync(fileUrl)); // 例:xxx/xx/xx.png
const imageBase64 = imageData.toString("base64");
const imagePrefix = "data:image/png;base64,";
console.log(imagePrefix + imageBase64);

知识点补充:NodeJs将任意文件转换为base64格式

很多图片音频等文件,有时候可能需要读取到数据中或者放到单文件的HTML中时,将它们转换成为base64格式是一个好方法,nodejs可以很方便的把文件转换为base64格式:

需要依赖库“fs”,“path”,“mime-types”,库mime-types可通过npm安装,具体的代码如下:

const fs = require('fs');
const path = require('path');
const mineType = require('mime-types');
 
let filePath = path.resolve('your/file/path');
 
let data = fs.readFileSync(filePath);
data = new Buffer(data).toString('base64');
 
let base64 = 'data:' + mineType.lookup(filePath) + ';base64,' + data;
 
fs.writeFileSync(path.resolve('your/save/file/path'), base64);

在你保存的文件中就有该文件的base64格式数据了,实际使用中可以直接使用转换的base64数据,然后可以放到img、audio或者video标签上使用。

总结

到此这篇关于使用Node.js实现base64和png文件相互转换的文章就介绍到这了,更多相关nodejs base64和png转换内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
js判断节假日实例代码
Dec 27 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 #Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 #Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 #Javascript
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
非常漂亮的js烟花效果
Mar 10 #Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 #Javascript
微信小程序实现搜索功能
Mar 10 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php 删除cookie方法详解
2014/12/01 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python基于PycURL实现POST的方法
2015/07/25 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python实现随机漫步算法
2018/08/27 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
地质灾害防治方案
2014/05/14 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
网吧温馨提示
2015/07/17 职场文书
MySQL创建管理子分区
2022/04/13 MySQL