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

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

赞 (0)

相关推荐

  • NodeJS学习笔记之FS文件模块

    NodeJS学习笔记之FS文件模块

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

  • 轻松创建nodejs服务器（1）：一个简单nodejs服务器例子

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

  • NodeJs基本语法和类型

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

  • 跟我学Nodejs（一）--- Node.js简介及安装开发环境

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

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

  • nodejs开发环境配置与使用

    nodejs开发环境配置与使用

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

  • NodeJS制作爬虫全过程

    NodeJS制作爬虫全过程

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

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

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

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

  • Nodejs进阶：如何将图片转成datauri嵌入到网页中去实例

    问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:"nodejs读取图片,转成base64,怎么读取呢?" 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即如何把图片转成对应的 datauri. 是个不错的问题,而且也是个很常用的功能.快速实现了个简单的demo,这里顺便记录一下. 实现思路 思路很直观:1.读取图片二进制数据 -> 2.转成base64字符串 -> 3.转成datauri. 关于base64的介绍,可以参考阮一峰老师的文章.而 da

  • 将RTF格式的文件转成HTML并在网页中显示的代码

    将RTF格式的文件转成HTML并在网页中显示的代码 它是这样工作的,将一个RTF文件上传,然后转成HTML显示出来,代码有点复杂,teaman还要好好研究,好象中文版有点问题. <html>     <body>     <?     if(!($userfile)) {     ?>     <form enctype="multipart/form-data" action="<?print($PHP_SELF);?>

  • php实现图片转换成ASCII码的方法

    本文实例讲述了php实现图片转换成ASCII码的方法.分享给大家供大家参考.具体如下: php图片转换成ASCII码,转换后可以直接通过字符串显示图片 <html> <head> <title>Ascii</title> <style> body{ line-height:0; font-size:1px; } </style> </head> <body> <?php $image = 'image.j

  • jQuery鼠标经过方形图片切换成圆边效果代码分享

    jQuery鼠标经过方形图片切换成圆边效果代码分享

    这是一款基于jQuery鼠标经过方形图片切换成圆边特效代码,点击图片会弹出浮层,用户还可以自定义对应图片的标题与文字说明,适合图片页面的展示,是一款非常实用的图片特效源码. 运行效果图: --------------------------------效果演示 源码下载---------------------------------- 鼠标经过方形图片切换成圆边效果 点击图片会弹出浮层 为大家分享的jQuery鼠标经过方形图片切换成圆边效果代码如下 <head> <title>j

  • JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

  • python通过pil模块将raw图片转换成png图片的方法

    本文实例讲述了python通过pil模块将raw图片转换成png图片的方法.分享给大家供大家参考.具体分析如下: python通过pil模块将raw图片转换成png图片,pil中包含了fromstring函数可以按照指定模式读取图片信息然后进行保存. rawData = open("foo.raw" 'rb').read() imgSize = (x,y) # Use the PIL raw decoder to read the data. # the 'F;16' informs

  • python使用reportlab实现图片转换成pdf的方法

    本文实例讲述了python使用reportlab实现图片转换成pdf的方法.分享给大家供大家参考.具体实现方法如下: #!/usr/bin/env python import os import sys from reportlab.lib.pagesizes import A4, landscape from reportlab.pdfgen import canvas f = sys.argv[1] filename = ''.join(f.split('/')[-1:])[:-4] f_j

  • python使用PythonMagick将jpg图片转换成ico图片的方法

    本文实例讲述了python使用PythonMagick将jpg图片转换成ico图片的方法.分享给大家供大家参考.具体分析如下: 这里使用到了PythonMagick模块,关于PythonMagick模块和ImageMagick的详细信息请参考:http://www.imagemagick.org/. 下面这段代码可以讲jpg图片转换成ico图标格式. # -*- coding: utf-8 -*- import PythonMagick img = PythonMagick.Image("c:/

  • python通过pil将图片转换成黑白效果的方法

    本文实例讲述了python通过pil将图片转换成黑白效果的方法.分享给大家供大家参考.具体分析如下: pil功能强大,convert方法可以轻易的将图片转换,下面的代码可以将图片转换成黑白效果 from PIL import Image image_file = Image.open("convert_image.png") # open colour image image_file = image_file.convert('1') # convert image to black

  • C#实现把图片转换成二进制以及把二进制转换成图片的方法示例

    本文实例讲述了C#实现把图片转换成二进制以及把二进制转换成图片的方法.分享给大家供大家参考,具体如下: private void button1_Click(object sender, EventArgs e) { string path = this.textBox1.Text; byte[] imgBytesIn = SaveImage(path); ShowImgByByte(imgBytesIn); //Parameters.Add("@Photo", SqlDbType.B

随机推荐