nodejs 浏览器弹窗下载图片 data:image/jpeg;base64示例

node http server

var http = require('http');var fs = require('fs');var server = http.createServer(function(req, res) {fs.readFile('img.txt', function(err, data) {var dataString = data.toString();var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),imgData = {};imgData.type = matches[1];imgData.data = new Buffer(matches[2], 'base64');//base64解码res.writeHead(200, {'Content-Type': 'application/jpeg',"Content-Disposition": "attachment;filename=img.jpeg;" //设置浏览器保存时的文件名称});res.write(imgData.data);res.end();});});server.listen(3000);

图片文件：

data:image/jpeg;base64,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

浏览器弹窗下载：

data:image/png;base64是什么 

大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC

那么这是什么呢？这是Data URI scheme。

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。

在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

目前，Data URI scheme支持的类型有：

data:,文本数据

data:text/plain,文本数据

data:text/html,HTML代码

data:text/html;base64,base64编码的HTML代码

data:text/css,CSS代码

data:text/css;base64,base64编码的CSS代码

data:text/javascript,Javascript代码

data:text/javascript;base64,base64编码的Javascript代码

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));

目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

举个图片的例子：

网页中一张图片可以这样显示：

<img src="http://mail.163.com/images/x.png" />

也可以这样显示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" />

把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。