使用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 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
jquery 经典动画菜单效果代码
Jan 26 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
js中小数转换整数的方法
Jan 26 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
python 文件操作删除某行的实例
2017/09/04 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python地震数据可视化详解
2019/06/18 Python
python3 线性回归验证方法
2019/07/09 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python获取array中指定元素的示例
2019/11/26 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
高中的自我鉴定
2013/12/16 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
出生证明范本
2015/06/15 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB