使用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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
vue3弹出层V3Popup实例详解
Jan 04 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 allow_url_include的应用和解释
2010/04/22 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
php以post形式发送xml的方法
2014/11/04 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python实现在windows下操作word的方法
2015/04/28 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python实现的选择排序算法示例
2017/11/29 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python ubplot使用方法解析
2020/01/10 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
Java基础知识面试要点
2016/07/29 面试题
自主实习接收函
2014/01/13 职场文书
教师简历自我评价
2014/02/03 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
实习协议书范本
2014/09/25 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
消防验收申请报告
2015/05/15 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers