使用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 相关文章推荐
菜单效果
Oct 14 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 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
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python判断两个对象相等的原理
2017/12/12 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python对execl 处理操作代码
2020/06/22 Python
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
分公司经理岗位职责
2013/11/11 职场文书
财务总监管理职责范文
2014/03/09 职场文书
男女朋友协议书
2014/04/23 职场文书
质量提升方案
2014/06/16 职场文书
大专生自荐书范文
2014/06/22 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
python实现简单区块链结构
2021/04/25 Python