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);

demo地址

demo地址请点击这里

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-11-18

NodeJs基本语法和类型

写在前面 今天想要查下Node的类型什么的知识,想要总结下,在Googol上看到一个文章,但是原始的链接不在了,在快照中把这篇文章拉出来,如果原作者有问题,请联系我! 该文章都是一些JS的基础,高手自动跳过!我之前没怎么写过js,这方面比较弱,所以在写node的时候也遇到了麻烦,这里给自己补充下知识! 正文 Node.js 的基础是 JavaScript 这门 脚本语言.而大多数的脚本语言一个共同的特点就是"弱类型". 不同于 PHP 的是,PHP 就是是有了新变量也无需申明,而 Ja

windows系统下简单nodejs安装及环境配置

相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼.有关nodejs的相关资料网上已经铺天盖地.由于它的高并发特性,造就了其特殊的应用地位. 国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/  这里不想谈太多的nodejs的相关信息.只说一下,windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网http://www.nodejs.org/download/  这里用的是

轻松创建nodejs服务器(1):一个简单nodejs服务器例子

我们先来实现一个简单的例子,hello world. 似乎每种语言教程的第一节都会讲这个,我们也不例外. 首先我们先创建一个项目目录,目录可自己定义,本案例的目录为 e:/nodetest/. 由于我们要搭建的是服务器,所以我把第一个文件命名为server.js. 在server.js里面输入以下代码: 复制代码 代码如下: var http = require("http");   http.createServer(function(request, response) {    

NodeJS制作爬虫全过程

今天来学习alsotang的爬虫教程,跟着把CNode简单地爬一遍. 建立项目craelr-demo 我们首先建立一个Express项目,然后将app.js的文件内容全部删除,因为我们暂时不需要在Web端展示内容.当然我们也可以在空文件夹下直接 npm install express来使用我们需要的Express功能. 目标网站分析 如图,这是CNode首页一部分div标签,我们就是通过这一系列的id.class来定位我们需要的信息. 使用superagent获取源数据 superagent就是

nodejs开发环境配置与使用

先说下nodejs这个哦,有人以为它是一种语言,其实不是,它是一个平台,一个建立在google的V8引擎上的js运行平台,就是解析js,并提供自己 的一些API给用户调用.从目前的情况来看,这个发展情况还算好,明天都有好多的前端后台工程师在加入,连一些大神也在关注甚至写博客,昨晚我还看见一篇 文章写道一个外国的网站写了将近90搞nodejs的web插件,这个真牛啊!那学习中国东东对于我们来说最直接的能带来什么利益呢:前端人员由于熟悉 js那么可以基本简单学习下linux就可以上手了,那后台工程师

NodeJS学习笔记之FS文件模块

一,开篇分析 文件系统模块是一个简单包装的标准 POSIX 文件 I/O 操作方法集.可以通过调用 require("fs") 来获取该模块.文件系统模块中的所有方法均有异步和同步版本. (1),文件系统模块中的异步方法需要一个完成时的回调函数作为最后一个传入形参. (2),回调函数的构成由调用的异步方法所决定,通常情况下回调函数的第一个形参为返回的错误信息. (3),如果异步操作执行正确并返回,该错误形参则为null或者undefined.如果使用的是同步版本的操作方法,一旦出现错误

跟我学Nodejs(一)--- Node.js简介及安装开发环境

学习资料 1.深入浅出Node.js 2.Node.js开发指南 简介(只捡了我觉得重要的) Node.js是让Javascript脱离浏览器运行在服务器的一个平台,不是语言: Node.js采用的Javascript引擎是来自Google Chrome的V8:运行在浏览器外不用考虑头疼的Javascript兼容性问题 采用单线程.异步IO与事件驱动的设计来实现高并发(异步事件也在一定程度上增加了开发和调试的难度): Node.js内建一个HTTP服务器,所以对于网站开发来说是一个好消息:  

node.js入门教程迷你书、node.js入门web应用开发完全示例

本书状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新. 本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作. 读者对象 本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby.Python.PHP或者Java这样面向对象的语言有一定的经验:对JavaScript处于初学阶段,并且完全是一个Node.js的新手. 这里指的适合对其他编程语言有一定经验的开发者,意思是说,本书不会对诸如数据类型

Node.js模块全局安装路径配置方法

下载安装NodeJS后,在自己选择的路径下会有如下的文件: 默认情况下NodeJS安装会同时安装npm(模块管理器:用于管理用户require的模块,有全局和本地两种). 注: 全局:执行npm install <模块的名字> -g 就会将模块装在全局路径下,当用户在程序中require(<模块的名字>)的时候不用考虑模块在哪,如果不修改全局路径,用户下载的模块会默认在C:\Users\Administrator\AppData\Roaming\npm这个路径下. 局部:执行npm

Node.js成为Web应用开发最佳选择的原因

一项颠覆性的技术进入技术市场总会带来一阵震惊,但随之而来往往是被放弃.然而,Node.js 当然不是这样的情况,它是一个开源的.跨平台的基于 Chrome 的 JavaScript 运行时.Node.js 由 Ryan Dahl 于 2009 年开发,该平台现在已成为实时 Web 应用开发的独特选择,通过提供高度交互的用户体验来提高 ROI. 使用 Node.js 的最大优点是开发人员可以在客户端和服务器端编写 JavaScript.值得一提的是,像 PayPal, Yahoo, eBay, N

详解基于node.js的脚手架工具开发经历

前言 我们团队的前端项目是基于一套内部的后台框架进行开发的,这套框架是基于vue和ElementUI进行了一些定制化包装,并加入了一些自己团队设计的模块,可以进一步简化后台页面的开发工作. 这套框架拆分为基础组件模块,用户权限模块,数据图表模块三个模块,后台业务层的开发至少要基于基础组件模块,可以根据具体需要加入用户权限模块或者数据图表模块.尽管vue提供了一些脚手架工具vue-cli,但由于我们的项目是基于多页面的配置进行开发和打包,与vue-cli生成的项目结构和配置有些不一样,所以创建项目

node.js插件nodeclipse安装图文教程

在eclipse插件中,node.js插件中比较知名的是nodeclipse,本文为大家介绍了nodeclipse安装教程,供大家参考,具体内容如下 安装nodeclipse 1. 依次点击工具→插件安装→浏览eclipse插件市场→搜索node.js→在搜索结果里找nodeclipse如下图 2.点击上图中的install开始加载,加载完毕点下一步接受许可协议静待安装完成即可 3. 安装完毕后重启HBuilder 4. 新建node项目:依次点击菜单文件→新建→其他如下图 5.选择要新建的no

利用n 升级工具升级Node.js版本及在mac环境下的坑

一.利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了.这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个工具包,我们可以使用NPM先安装 n 工具包,然后用它升级nodejs,十分的方便. sudo npm cache clean -f sudo npm install -g n sudo n stable 上面这是使用 n 来安装最新的稳定版的nodejs.

详解使用Typescript开发node.js项目(简单的环境配置)

最近在学习typescript的过程中,想到也许可以使用ts来开发node.js项目.在网上搜了一下,其实已经有很多开发者实践了这方面的内容.这里,我记录一下自己搭建开发环境的简单过程. 使用Typescript开发的好处: 较严格的类型检查和语法检查. 对ES6/ES2015/ES7(部分)支持比较好. 编译后的js文件很干净,也支持多种代码规范. 其他,请参见文档. 准备 node.js v6.9.1 或者任意的新版本,老版本暂时没有试验. tsc typescript编译器,使用npm安装

详解Node.js 命令行程序开发教程

一种编程语言是否易用,很大程度上,取决于开发命令行程序的能力. Node.js 作为目前最热门的开发工具之一,怎样使用它开发命令行程序,是 Web 开发者应该掌握的技能. 下面就是我在它的基础上扩展的教程,应该是目前最好的解决方案了. 一.可执行脚本 我们从最简单的讲起. 首先,使用 JavaScript 语言,写一个可执行脚本 hello . #!/usr/bin/env node console.log('hello world'); 然后,修改 hello 的权限. $ chmod 755

node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法

在使用npm install安装扩展插件时,系统提示"npm install Error: ENOENT, stat 'C:Users<用户名>AppDataRoamingnpm'". 以前都是很顺利的安装过程,没出现这种情况.我这里的解决办法是直接创建上面提示的目录就好了,应该是node.js权限不够,在此备注. 有时候就是这样,很可能一个很久都无法解决的问题,实际解决方法很简单,就是这么任性!!