使用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 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
AngularJS手动表单验证
Feb 01 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
python 显示数组全部元素的方法
2018/04/19 Python
浅析Python数据处理
2018/05/02 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python实现复制文件到指定目录
2019/10/16 Python
postman和python mock测试过程图解
2020/02/22 Python
Python datetime模块使用方法小结
2020/06/18 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
司仪主持词两篇
2014/03/22 职场文书
一体化教学实施方案
2014/05/10 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
2016年学校招生广告语
2016/01/28 职场文书