使用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 插件 任意位置浮动固定层
Dec 25 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
php session的锁和并发
2016/01/22 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PDO::setAttribute讲解
2019/01/29 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
一道输出判断型Java面试题
2014/10/01 面试题
《东方明珠》教学反思
2014/04/20 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
mysql sock文件存储了什么信息
2022/07/15 MySQL