专栏首页IMWeb前端团队Nodejs进阶:如何将图片转成datauri嵌入到网页中去

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

问题:将图片转成datauri

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

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

实现思路

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

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

data:[][;base64],

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

data: image/png;base64, xxx

具体实现

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

var fs = require('fs');
var filepath = './1.png';

var bData = fs.readFileSync(filepath);

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

var base64Str = bData.toString('base64');

最后,转换成datauri的格式。

var datauri = 'data:image/png;base64,' + base64Str;

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

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地址请点击这里,或者

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主页地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • fastjson 笔记

    demo/fastjson at master · suveng/demo · GitHub

    suveng
  • 持续搞【附近】系列---听说MongoDB是专业的(三)

    一直听说MongoDB才是【专业】搞地理空间查询的,人家才是【专业】的!相当长一段时间来,一说搞【附近】就会相当一批人的脑海里就不自主浮想到MongoDB......

    老李秀
  • Vue CLI脚手架安装全过程及遇到的问题解决

    今天使用 Vue 官方的一个脚手架工具 Vue CLI 创建了一个项目,顺便把安装过程和遇到的问题整理了一下。效果如下图:

    德顺
  • 新年送福气 | 您有一份NLP大礼包免费领取

    第一种,在实践中学习,找一个特定的任务,譬如文本分类、情感分析等。然后以做好任务为导向的去挖掘和这一个任务相关的知识点。 由于没有系统的学习,肯定会遇到各种各...

    小小詹同学
  • Tmux(-yank,-cssh,-xpanes)使用指南

    最近忙,忙什么啊?忙着梳理项目,没时间写东西,也没什么素材,正好小伙伴抽时间写了,我就转载一下。那些写了上,没写下的,都得欠着,每周日也在坚持看...

    疯狂的KK
  • 搞事 | 5分钟部署一个机器人帮你告别 “信息焦虑”

    上次搞事用服务器搭建了一套监控系统,包含 Bug 追踪、数据监控以及可视化仪表盘等功能。

    咸鱼学Python
  • python | 文章公式img转url小工具

    经过浏览器的渲染就可以显示为正确的公式,但是公众号和有些网站对公式的支持很差,无法显示正确排版的公式。如果需要把文章发到不同的网站,往往需要单独调整格式。

    小小詹同学
  • 介绍一个免费的云开发工具:Cloud Shell

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Jerry Wang
  • 【Git学习笔记6】把当前工作现场“储藏”起来:stash操作

    明月几时有,把酒问青天,光吃菜,不加点“酒”怎么行呢。今天来说说在code战场上“喝醉”后怎么收场的事情,Bug分支以及bug分支的后处理。啥,题目有点懵??,...

    小小詹同学
  • 记一次 Maven 本地仓库埋坑之 Verifying Availability

    某 Java 后端项目使用 maven 构建,因为某些原因,某些依赖库下载不了,直接找其它人索要了他电脑上的 maven 本地仓库里的依赖包。

    请叫我大苏

扫码关注云+社区

领取腾讯云代金券