使用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 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
vue+Element-ui实现分页效果
Nov 15 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
在字符串中把网址改成超级链接
2006/10/09 PHP
php 定界符格式引起的错误
2011/05/24 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中基础的socket编程实战攻略
2016/06/01 Python
python中range()与xrange()用法分析
2016/09/21 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python实现电脑自动关机
2018/06/20 Python
python读取文本中的坐标方法
2018/10/14 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
抗震救灾标语
2014/06/26 职场文书
教师暑期培训感言
2014/08/15 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
婚礼父母答谢词
2015/01/04 职场文书
董事长新年致辞
2015/07/29 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers