Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Nodejs进阶:如何将图片转成datauri嵌入到网页中去

Nodejs进阶:如何将图片转成datauri嵌入到网页中去

作者头像
IMWeb前端团队
发布于 2019-12-03 07:37:45
发布于 2019-12-03 07:37:45
1.4K00
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

问题:将图片转成datauri

今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成base64,怎么读取呢?” 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即如何把图片转成对应的 datauri。

是个不错的问题,而且也是个很常用的功能。快速实现了个简单的demo,这里顺便记录一下。

实现思路

思路很直观:1、读取图片二进制数据 -> 2、转成base64字符串 -> 3、转成datauri。

关于base64的介绍,可以参考阮一峰老师的文章。而 datauri 的格式如下

data:[][;base64],

具体到png图片,大概如下,其中 “xxx” 就是前面的base64字符串了。接下来,我们看下在nodejs里该如何实现

data: image/png;base64, xxx

具体实现

首先,读取本地图片二进制数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var fs = require('fs');
var filepath = './1.png';

var bData = fs.readFileSync(filepath);

然后,将二进制数据转换成base64编码的字符串。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var base64Str = bData.toString('base64');

最后,转换成datauri的格式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var datauri = 'data:image/png;base64,' + base64Str;

完整例子代码如下,代码非常少:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var fs = require('fs');
var filepath = './1.png';

var bData = fs.readFileSync(filepath);
var base64Str = bData.toString('base64');
var datauri = 'data:image/png;base64,' + base64Str;

console.log(datauri);

github demo地址

demo地址请点击这里,或者

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
git clone https://github.com/chyingp/nodejs-learning-guide.git
cd nodejs-learning-guide/examples/2016.11.15-base64-datauri
node server.js

然后在浏览器访问 http://127.0.0.1:3000,就可以看到效果 :)

相关链接

Base64笔记:http://www.ruanyifeng.com/blog/2008/06/base64.html

Data URIs:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

本文摘录自《Nodejs学习笔记》,更多章节及更新,请访问 github主页地址

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-07-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
nodejs图片上传
用户1141560
2017/12/26
9.1K0
nodejs图片上传
一文了解文件上传全过程(项目中碰到的难点)
平常在写业务的时候常常会用的到的是 GET, POST请求去请求接口,GET 相关的接口会比较容易基本不会出错,而对于 POST中常用的 表单提交,JSON提交也比较容易,但是对于文件上传呢?大家可能对这个步骤会比较害怕,因为可能大家对它并不是怎么熟悉,而浏览器Network对它也没有详细的进行记录,因此它成为了我们心中的一根刺,我们老是无法确定,关于文件上传到底是我写的有问题呢?还是后端有问题,当然,我们一般都比较谦虚, 总是会在自己身上找原因,可是往往实事呢?可能就出在后端身上,可能是他接受写的有问题,导致你换了各种请求库去尝试,axios,request,fetch 等等。那么我们如何避免这种情况呢?我们自身要对这一块够熟悉,才能不以猜的方式去写代码。如果你觉得我以上说的你有同感,那么你阅读完这篇文章你将收获自信,你将不会质疑自己,不会以猜的方式去写代码。
前端迷
2020/04/08
3.5K0
一文了解文件上传全过程(项目中碰到的难点)
harmony-utils之ImageUtil,图片相关工具类
harmony-utils 一款功能丰富且极易上手的HarmonyOS工具库,借助众多实用工具类,致力于助力开发者迅速构建鸿蒙应用。其封装的工具涵盖了APP、设备、屏幕、授权、通知、线程间通信、弹框、吐司、生物认证、用户首选项、拍照、相册、扫码、文件、日志,异常捕获、字符、字符串、数字、集合、日期、随机、base64、加密、解密、JSON等一系列的功能和操作,能够满足各种不同的开发需求。 picker_utils 是harmony-utils拆分出来的一个子库,包含PickerUtil、PhotoHelper、ScanUtil。
童长老
2025/06/28
1710
【腾讯云AI绘画】零基础无代码体验指南
从世界上第一台科学计算机的诞生至今,人类从未停止探索机器智能化的脚步,就像大多数科幻电影中,总会出现能够与人类交流、有着独立思想的机器人一样,创造一个具有智慧的机器一直是一个追逐的梦想。
爱去西
2023/12/15
7970
【腾讯云AI绘画】零基础无代码体验指南
Nodejs进阶:核心模块https 之 如何优雅的访问12306
IMWeb前端团队
2018/01/08
1.8K0
post方式发送接收文件
//文件post发送 var express = require('express'); var router = express.Router(); var request = require("r
用户1141560
2017/12/26
2.3K0
nodejs图片转换字节保存
fs.readFile('上传图片路径', function(err, data) { if (err) { // 错误处理 return; } var base64str = new Buffer(data).toString('base64'); // 图片转换为字节 fs.writeFileSync('copy.jpg', base64str); // 字节流保存为图片 });
磊哥
2018/05/08
3.1K0
把UIImage转成PDF进行保存
最近有个场景,需要把H5传递过来的base64保存为PDF文件,经解析,H5是直接把png转base64,保存下来的文件就算是重命名为【xxx.pdf】,依然还是没法在【文件.app】中打开,只能把base64转成UIImage,再通过绘制PDF来进行保存
freesan44
2022/01/26
8270
[记录点滴]在Ionic和Android中上传Blob图片
本文是开发中的简略记录,具体涉及知识点有:Blob,Ionic,Android和Lua。
罗西的思考
2020/09/07
1.7K0
如何将文件流转换成byte[]数组
字节是二进制数据的单位,1字节(Byte)=8位(bit),byte数组一般用来处理文件流的操作
在水一方
2023/02/23
3.7K0
如何将录制的DOM转成视频文件
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 背景说明:      最近有在看GitHub上的rrweb项目,确实是一款DOM录制的神器,在使用文档中提供了很多我们会用到的场景和对应的示例,我们今天来看一下其中一个场景《转换为视频》,虽然rrweb直接回放的效果最佳但还是会遇到需要转为视频进行存储的要求,通过查看rrweb提供的rrvideo项目后决定写一下整个转换的过程,大致的流程图如下: 环境配置: 安
前端小鑫同学
2022/12/26
2.1K0
如何将录制的DOM转成视频文件
C# base64 和图片互转
C# imgage图片转base64字符/base64字符串转图片另存成 //图片转为base64编码的字符串 protected string ImgToBase64String(string Imagefilename) { try { Bitmap bmp = new Bitmap(Imagefilename); MemoryStream ms = new MemoryStream(); bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jp
yaphetsfang
2020/07/30
2.1K0
Node.js 高级进阶之 fs 文件模块学习
文件操作是开发过程中并不可少的一部分,作为一名 Node.js 开发工程师更应该熟练掌握fs模块的相关技巧。Node.js 中的 fs 模块是文件操作的封装,它提供了文件读取、写入、更名、删除、遍历目录、链接等 POSIX 文件系统操作。与其它模块不同的是,fs 模块中所有的操作都提供了异步和同步的两个版本,具有 sync 后缀的方法为同步方法,不具有 sync 后缀的方法为异步方法
coder_koala
2019/07/30
1.7K0
Node.js 高级进阶之 fs 文件模块学习
返回给前端图片流
在开发时遇到造一个这样的问题,场景是这样的,前端需要一个接口,根据用户的id返回用户的图片流,当时没明白什么是流,后来通过查看nodejs的文档,nodejs具有流场景的应用,代码如下:
挥刀北上
2021/11/30
2.5K0
返回给前端图片流
C# WinForm实现画笔签名及解决MemoryBmp格式问题
我的文章 《C# 结合JavaScript实现手写板签名并上传到服务器》主要介绍了 web 版的需求实现,本文应项目需求介绍如何通过 C# WinForm 通过画布画笔实现手写签名,并在开发过程中解决遇到的一些格式转换的问题,提供一些思路。
初九之潜龙勿用
2024/10/15
4050
C# WinForm实现画笔签名及解决MemoryBmp格式问题
nodejs 图片处理工具 gm 的使用!
GraphicsMagick 和 ImageMagic 安装完以后,需要把对应执行文件所在目录添加到环境变量,如下图所示。
一枚小工
2020/07/22
1.7K0
nodejs 图片处理工具 gm 的使用!
使用nodejs填充word模板
这两天接到一个需求,需要批量生成wrod合同,合同中需要填充不同的信息,姓名,身份证号码,家庭住址,如果信息量比较少,手动填充比较快,但是合同有几百份,上面的信息不同,所以我们需要开发一个批量工具。
挥刀北上
2021/02/08
3.8K0
教你手写webpack常用loader
webpack 作为目前主流的前端构建工具,我们几乎每天都需要与它打交道。个人认为一个好的开源产品壮大的原因应该包括核心开发者的稳定输出以及对应生态的繁荣。对于生态来说, webpack 是一个足够开放的类库,提供了可插拔的方式去自定义一些配置,包括配置 loader 和 plugin ,本篇我们主要讨论loader。
gogo2027
2022/10/18
4260
前端Base64编码知识,一文打尽
本文将详细的介绍前端 Base64 编码知识,探索起源,让大家对开发经常用到的 Base64 有个更全面深入的认知。
coder_koala
2021/08/26
1.4K0
如何使用FormData上传压缩裁剪后的图片Blob对象
在前端页面,我们通常会遇到需要用户上传图片的操作,可能还会在前端进行图片编辑的操作(比如头像的选区裁剪),然后如果图片过大的话,我们还会对图片进行压缩。这些功能我们通常通过Canvas来进行,最后使用Canvas API函数toDataURL来得到图片的Base64字符串,然后当我们要上传到后台的时候,会面临2种选择:
一斤代码
2018/08/21
4K0
如何使用FormData上传压缩裁剪后的图片Blob对象
相关推荐
nodejs图片上传
更多 >
交个朋友
加入前端学习入门群
前端基础系统教学 经验分享避坑指南
加入前端工作实战群
前端工程化实践 组件库开发经验分享
加入前端趋势交流群
追踪前端新趋势 交流学习心得
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档