使用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 Dialog 弹出层对话框插件
Aug 09 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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四种基础算法代码实例
2013/10/29 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
实例解析php的数据类型
2018/10/24 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
js实现弹框效果
2021/03/24 Javascript
结构工程研究生求职信
2013/10/13 职场文书
路政管理专业推荐信
2013/11/11 职场文书
大学生思想汇报范文
2013/12/31 职场文书
社区重阳节活动总结
2015/03/24 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers