使用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 + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 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 mongodb扩展时 需要注意的事项
2013/06/18 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
tensorflow实现加载mnist数据集
2018/09/08 Python
wxpython绘制圆角窗体
2019/11/18 Python
乌克兰在线药房:Аптека24
2019/10/30 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
倡议书的写法
2014/08/30 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
碧霞祠导游词
2015/02/09 职场文书
世界遗产的导游词
2015/02/13 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
企业工会工作总结2015
2015/05/13 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
MongoDB使用场景总结
2022/02/24 MongoDB