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

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

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载

问题:将图片转成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 条评论
登录 后参与评论

相关文章

  • 推荐算法之协同过滤

    推荐算法在个性化领域有着广泛的应用,粗略统计,所涉及到的学科包括人工智能、机器学习、认知科学、信息抽取、数据挖掘、预测理论、近似理论,甚至是管理科学、市场营销和...

    刘建银
  • nodejs的简单爬虫

    使用nodejs爬虫豆瓣电影数据,要爬取的页面地址:https://movie.douban.com/top250,简单实现如下: 'use strict'; ...

    用户1141560
  • 自己部署 Node.js 版本的 Wafer2 Demo

    自行部署适用于想将腾讯云 Wafer SDK 和 Demo 部署在自己的服务器上以获得更高的灵活性和操纵权限的用户。部署过程需要从 0 开始搭建线上环境,需要有...

    Jason
  • 如何建立一个Node.js的应用生产在Ubuntu 14.04

    Node.js是一个开源的Javascript运行时环境,可以轻松构建服务器端和网络应用程序。该平台运行在Linux,OS X,FreeBSD和Windows上...

    程序员的自我修养
  • Tinker:技术的初心与坚持

    回想 Tinker 的初心,我们希望开发者可以用很小代价进行快速升级,它是国内追求快速迭代诉求。立项至今,Tinker踩了很多坑也填了很多坑。今天,我希望跟大家...

    张绍文
  • nodejs的gridfs基本操作

    var mongoose = require('mongoose'); var Schema = mongoose.Schema; mongoose.con...

    用户1141560
  • jenkins学习之自动打包构建nodejs应用

    上一节记录了下jenkins在centos下的安装,这节继续,说下怎么使用jenkins和nodejs进行自动打包更新服务。 创建任务 创建任务比较简单,这里我...

    用户1141560
  • Android N 混合编译与对热补丁影响解析

    尽管当前Tinker还没有开启内测,我们会尽力在开源前做的更好。让Tinker无论在Dalvik还是Art上,都有着最好的表现,同时也恳请大家继续耐心等候我们。

    张绍文
  • 通过 WeCOS 进行小程序瘦身

    尽管 4 月份微信官方将小程序的大小限制从 1M 放开到 2M,但是对于使用大量图片的小程序(电商等)来说,2M 的限制还是显得拮据。基于这种场景,腾讯云微信小...

    Jason
  • TypeScript学习笔记之基础类型

    从今天开始学习typescript了,记录ts学习点滴,最后,使用ts结合nodejs开发后端应用,一起共勉吧: typescript最新版本2.6,所有演示代...

    用户1141560

扫码关注云+社区

领取腾讯云代金券