利用nodejs读取图片并将二进制数据转换成base64格式

目录
  • 读取图片并将二进制数据转换成base64格式
  • nodejs读取服务器图片,转为base64显示在网页上

读取图片并将二进制数据转换成base64格式

首先，使用nodejs进行数据读取，需要用到nodejs的fs模块进行数据读取：

fs.readFile('你的资源路径','binary',function(err,data){
    if(err){
        console.log(err)
    }else{
        console.log('数据读取成功');
    }
});

读取到当前的文件数据以后，我们还需要使用js的Buffer类进行数据转换：

先用buffer将数据进行缓存

const buffer = new Buffer(data, 'binary');

然后获取到图片的base64格式数据：

buffer.toString('base64')

由于获取到的base64不含有前面的图片类型等内容，所以，我们赋值给image对象的时候，还需要添加上相应的图片类型内容：

img.src = 'data: image/'+ getImageType(fileName) +';base64,' + buffer.toString('base64');
//获取当前图片的格式
function getImageType(str){
    var reg = /\.(png|jpg|gif|jpeg|webp)$/;
    return str.match(reg)[1];
}

最后，附上完整的代码：

fs.readFile('你的资源路径','binary',function(err,data){
    if(err){
        console.log(err)
    }else{
        const buffer = new Buffer(data, 'binary');
        img.src = 'data: image/'+ getImageType(fileName) +';base64,' + buffer.toString('base64');
    }
});

既然有读取，那么，再加上如何将base64格式的图片保存到本地，还是需要用到buffer进行保存：

//保存图片
function saveImg(){
    const base64 = canvas.toDataURL().replace(/^data:image\/\w+;base64,/, ""); //必须去掉前缀
    const buffer = new Buffer(base64, 'base64');
    fs.writeFile('保存路径', buffer, function (err) {
        if(err) throw err;
        console.log('保存成功');
    });
}

nodejs读取服务器图片,转为base64显示在网页上

const fs = require("fs");
const mineType = require("mime-types");
function imgToBase64(url) {
try {
let imgurl = config.imageUrl;
let imageData = fs.readFileSync(imgurl);
if (!imageData) return "";
let bufferData = Buffer.from(imageData).toString("base64");
let base64 = "data:" + mineType.lookup(imgurl) + ";base64," + bufferData;
return base64;
} catch (error) {
return "";
}
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Node.js中使用Buffer编码、解码二进制数据详解

    JavaScript很擅长处理字符串,但是因为它最初的设计是用来处理HTML文档,因此它并不太擅长处理二进制数据.JavaScript没有byte类型,没有结构化的类型(structured types),甚至没有字节数组,只有数字和字符串.(原文:JavaScript doesn't have a byte type - it just has numbers - or structured types, or http://skylitecellars.com/ even byte arra

  • 使用Node.js实现base64和png文件相互转换的方法

    前天浏览技术博客,看到大厂面试题型中有使用nodejs实现base64和图片文件相互转换的例子,刚好近期要开发这个功能,暂时记录下来,下周开发完成再做一个补充. 1. 将base64 转换为图片文件,这里举例用的png文件 const fs = require('fs'); const path = 'xxx/'+ Date.now() +'.png'; const base64 = data.replace(/^data:image\/\w+;base64,/,""); //去掉图片

  • Nodejs把接收图片base64格式保存为文件存储到服务器上

    下面一小段代码给大家分享Nodejs把接收图片base64格式保存为文件存储到服务器上的方法,具体代码如下所示: app.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data:URL var base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""); var dataBuffer =

  • node.js学习之base64编码解码

    node.js学习之base64编码解码

    一. Base64编码由来 为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就 不能通过邮件传送.这样用途就受到了很大的限制,比如图片二进制流的每个字节不可能全部是可见字符,所以就传送不了.最好的方法就是在不改变传统协议的情 况下,做一种扩展方案来支持二进制文件的传送.把不可打印的字符也能用可打印字符来表示,问题就解决了.Base64编码应运而生,Base64就是一种 基于64个可打印字符来表示二进制数据的表示方法

  • 利用nodejs读取图片并将二进制数据转换成base64格式

    目录 读取图片并将二进制数据转换成base64格式 nodejs读取服务器图片,转为base64显示在网页上 读取图片并将二进制数据转换成base64格式 首先,使用nodejs进行数据读取,需要用到nodejs的fs模块进行数据读取: fs.readFile('你的资源路径','binary',function(err,data){     if(err){         console.log(err)     }else{         console.log('数据读取成功');  

  • 如何利用python读取图片属性信息

    如何利用python读取图片属性信息

    从照片里面获取GPS信息.可交换图像文件常被简称为EXIF(Exchangeable image file format),是专门为数码相机的照片设定的,可以记录数码照片的属性信息和拍摄数据,EXIF信息不支持png,webp等图片格式.         Python中使用ExifRead包读取图片的属性信息,安装方式为: pip install exifread         使用exifread.process_file获取图像的信息: img_path = r"bei_012744.jp

  • 利用nodeJS+vue图片上传实现更新头像的过程

    利用nodeJS+vue图片上传实现更新头像的过程

    目录 思路: 1.前端准备 2.node后端服务 总结 思路: 前端通过el-upload将图片传给后端服务,后端通过formidable中间件解析图片,生成图片到静态资源文件夹下(方便前端直接访问),并将图片路径返回给前端,前端拿到图片路径即可渲染头像. 1.前端准备 前端采用vue的el-upload组件,具体用法见官方API.使用代码如下 <!--头像上传--> <el-upload class="avatar-uploader" action="ht

  • thinkphp5框架实现数据库读取的数据转换成json格式示例

    thinkphp5框架实现数据库读取的数据转换成json格式示例

    本文实例讲述了thinkphp5框架实现数据库读取的数据转换成json格式.分享给大家供大家参考,具体如下: 首先从数据库读数据,然后调用list_to_tree方法,再调用findchild方法,最后输出 $category = DB::name('Category'); $category_list = $category->select(); $data=$this->list_to_tree($category_list,'category_id','category_parent_i

  • 把数据转换成XML格式的好处

    我们常常会碰到需要处理以各种格式(从以逗号或者制表符做分隔符的文件到更负载的格式)保存或者传输的数据的情况,对每一种格式你都需要对应的解析器(parser).这一缺点减缓了开发进度,而且可能会导致错误的发生.一个解决方案就是把常用格式的数据转化成XML文档,然后对它进行保存.处理或者转换成其它格式.一个实例现在已经有好多种实现在软件内部或者软件之间进行数据保存.导出.导入以及传输功能的数据格式.最常见的是定界格式(delimited format),如逗号或者制表符分隔数据格式以及定长数据格式.

  • js 将图片连接转换成base64格式的简单实例

    我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Ano

  • php将从数据库中获得的数据转换成json格式并输出的方法

    如下所示: header('content-type:application/json;charset=utf8'); $results = array(); while ($row = mysql_fetch_assoc($result_query)) { $results[] = $row; } if($results){ echo json_encode($results); }else{ echo mysql_error(); } 将查询到的数组存放到一个新的数组中,然后返回json格式

  • SpringBoot2.0解决Long型数据转换成json格式时丢失精度问题

    SpringBoot2.0解决Long型数据转换成json格式时丢失精度问题

    目录 解决Long型数据转换成json格式时丢失精度 SpringBoot时间格式,Long型精度丢失常见问题 时间格式,Long型精度丢失 解决Long型数据转换成json格式时丢失精度 最近项目中突然发现雪花算法生成的数据库主键id返回给前端时和本身的值不一致,于是后端进行断点调试发现没问题,于是问题聚焦于转换json格式,于是自定义Json 格式化,因为使用Springboot,全是自动化配置,所以要覆盖框架本身的转换方式,经翻阅官方文档,提下下列注解,自定json转换 代码如下: @Js

  • nodejs读取图片返回给浏览器显示

    本文主要是使用nodejs处理图片等资源返回给浏览器显示方法,但不只限制于图片,也可以是音频视频等其他非字符串文件的返回和显示.也可以扩展成nodejs静态资源服务器的开发方法. 请求头说明 在http响应里面有几个重要的东西,Content-Type 说明文件渲染MIME类型,这是我们本文的相关处理关键. 常用的MIME类型 { "css": "text/css", "gif": "image/gif", "htm

  • canvas压缩图片转换成base64格式输出文件流

    昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下 <!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--&

随机推荐