问题:将图片转成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,就可以看到效果

Nodejs进阶:如何将图片转成datauri嵌入到网页中去的更多相关文章

  1. NodeJS学习笔记 进阶 (5)将图片转成datauri嵌入到html(ok)

    个人总结:这篇文章讲解了使用Node处理转换base64编码图片,读完这篇文章需要5分钟. 摘选自网络 问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:“nodejs读取图片,转成b ...

  2. 使用Data URL将图片嵌入到网页中

    早些时候,使用IE6浏览器,网页可以另存为mht,如果网页包含图片,那么图片也会存储到mht中. mht是微软提供的一种聚合HTML文档,它的本质其实是一个文本文件,那么我们也许会好奇,它的图片存储到 ...

  3. nodejs进阶(4)—读取图片到页面

    我们先实现从指定路径读取图片然后输出到页面的功能. 先准备一张图片imgs/dog.jpg. file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'.(file. ...

  4. 图片上传,直接在网页中显示(支持IE,谷歌,火狐浏览器)

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

    在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...

  6. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  7. C#图片转换成二进制流并且保存到sql server数据库

    注意:我要存储文件二进制流的列的类型是text,不是image类型. 我已经实现了从数据库中读取text类型的二进制流,,现在就是不知道怎么存进去. 我的部分关键代码: StreamReader sr ...

  8. 使用jquery获取网页中图片的高度——解惑

    jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...

  9. NodeJS学习笔记 进阶 (12)Nodejs进阶:crypto模块之理论篇

    个人总结:读完这篇文章需要30分钟,这篇文章讲解了使用Node处理加密算法的基础. 摘选自网络 Nodejs进阶:crypto模块之理论篇 一. 文章概述 互联网时代,网络上的数据量每天都在以惊人的速 ...

随机推荐

  1. c# 设置winform程序为默认打开软件 在运行中获取参数

    1.右键→打开方式→选择默认程序→选择winform程序 2.修改Program.cs 判断注册的事件是否存在,如果不存在则运行实例,并把参数传入MainForm里,如果存在则把参数写到txt文件中, ...

  2. chrome浏览器首页被hao123劫持解决办法

    在chrome浏览器设置里面将新标签页地址改为www.baidu.com, 不过一般来说这个办法完全没用,因为我们面对的是史无前例的大流氓. 查看桌面chrome的快捷方式是否被篡改.右键快捷方式,点 ...

  3. mysql 动态新建以及删除分区表

    因为项目需要,最近研究了一下在mysql数据库下如何动态新建以及删除分区表.如果全部借助存储过程的话,新建以及删除分区表在逻辑上比较死板.不灵活,而且还容易出错.因此,我新建了一个数据表table_f ...

  4. my_strcpy()

    char* my_strcpy(char* des, const char* src){ while(*des++=*src++); return des; }

  5. Linux磁盘管理之创建磁盘分区05

    一.磁盘基础知识 磁盘安装在计算机上后,在系统读取到硬盘后并不能直接使用,必须经过分区.格式化才能够正确使用.这一次主要是针对磁盘分区进行简单总结,存储设备类型:U盘.光盘.软盘.硬盘.磁带. 硬盘接 ...

  6. TCMalloc 安装和使用

    前面三篇译文<TCMalloc:线程缓冲的Malloc>.<使用TCMalloc的堆栈检查>.<使用TCMalloc进行堆栈分析>介绍了TCMalloc的基本原理, ...

  7. Canvas事件处理

    鼠标事件 canvas.onmousedown = function(e ) {//React to the mouse down event }; canvas.addEventListener(' ...

  8. MMORPG大型游戏设计与开发(part4 of net)

    上一节简单的介绍了服务器消息处理的流程,想必大家对这方面有了初步的认识,接下来我们需要知道和掌握的便是其中一些重要的方法,进一步深入熟悉整个构架. 1.FD_*系列宏函数 FD_ZERO(fd_set ...

  9. java设计模式之命令模式

    学校中.生活中.社会中总是会存在一定的阶层,虽然我们很多人都不可认可阶层的存在.命令这一词也就在阶层中诞生.家长命令孩子,老师命令学生,领导命令小娄娄.这些都在我们的生活存在的东西,相信这一个模式学习 ...

  10. Spring AOP 5种通知与java动态代理

    接口,要求为每个方法前后添加日志  @Component("arithmeticCalculator") public class ArithmeticCalculatorImpl ...