使用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 私有成员分析
Jan 13 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
详解Vue的mixin策略
Nov 19 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创建PDF中文文档
2006/10/09 PHP
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python实现购物车程序
2018/04/16 Python
python中for用来遍历range函数的方法
2018/06/08 Python
详解python配置虚拟环境
2019/04/08 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
办公室主任竞聘演讲稿
2014/05/15 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
实习护士自荐信
2014/06/21 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
简单了解 MySQL 中相关的锁
2021/05/25 MySQL