1 | <h1 align="center">
|
2 | <br>
|
3 | <img width="365" src="https://cdn.rawgit.com/data-uri/datauri/master/media/datauri.svg" alt="datauri">
|
4 | <br>
|
5 | <br>
|
6 | <br>
|
7 | </h1>
|
8 |
|
9 | Node.js [Module](#module) and [CLI](http://npm.im/datauri-cli) to generate [Data URI scheme](http://en.wikipedia.org/wiki/Data_URI_scheme).
|
10 |
|
11 | > The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in web pages as if they were external resources.
|
12 |
|
13 | from: [Wikipedia](http://en.wikipedia.org/wiki/Data_URI_scheme)
|
14 |
|
15 | [![Build Status](https://travis-ci.org/data-uri/datauri.svg?branch=master)](http://travis-ci.org/data-uri/datauri) [![Coverage Status](https://coveralls.io/repos/data-uri/datauri/badge.svg?branch=master&service=github)](https://coveralls.io/github/data-uri/datauri?branch=master) [![Dependency Status](https://www.versioneye.com/user/projects/560b7b3f5a262f001e0007e2/badge.svg?style=flat)](https://www.versioneye.com/user/projects/560b7b3f5a262f001e0007e2) [![NPM version](http://img.shields.io/npm/dm/datauri.svg?style=flat)](https://www.npmjs.org/package/datauri)
|
16 |
|
17 | MODULE
|
18 | -------
|
19 | `npm install --save datauri`
|
20 |
|
21 | 1. [From file path](#readable-stream)
|
22 | * [Asynchronous](#readable-stream)
|
23 | * [Readable Stream](#readable-stream)
|
24 | * [Promise](#promise-node-012-works-with-es2016-asyncawait)
|
25 | * [Callback](#callback)
|
26 | * [Synchronous](#synchronous-class)
|
27 | * [Class](#synchronous-class)
|
28 | * [Function](#synchronous-function)
|
29 | 2. [From a Buffer](#from-a-buffer)
|
30 | 3. [From a String](#from-a-string)
|
31 | 4. [Method chaining](#method-chaining)
|
32 | 5. [Task plugins using datauri](#tools-using-datauri)
|
33 | * [npm script](#npm-script)
|
34 | * [gulp](#gulp)
|
35 | * [grunt](#grunt)
|
36 | 6. [Develop](#develop)
|
37 | 7. [License](#license)
|
38 | 8. [ChangeLog](https://github.com/data-uri/datauri/releases)
|
39 | 9. [Tools using datauri](https://github.com/data-uri/datauri/blob/master/README.md#tools-using-datauri)
|
40 |
|
41 | ### Readable Stream
|
42 | ```js
|
43 | const Datauri = require('datauri');
|
44 | const datauri = new Datauri();
|
45 |
|
46 | datauri.pipe(process.stdout);
|
47 | datauri.encode('test/myfile.png');
|
48 | ```
|
49 |
|
50 | ```js
|
51 | const Datauri = require('datauri');
|
52 | const datauri = new Datauri();
|
53 |
|
54 | datauri.on('encoded', content => console.log(content));
|
55 | //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
|
56 |
|
57 | datauri.on('error', err => console.log(err));
|
58 | datauri.encode('test/myfile.png');
|
59 | ```
|
60 |
|
61 | ### Promise (works with es2016 async/await)
|
62 | ```js
|
63 | 'use strict';
|
64 |
|
65 | const DataURI = require('datauri').promise;
|
66 | // babelers: import { promise as DataURI } from 'datauri';
|
67 |
|
68 | DataURI('test/myfile.png')
|
69 | .then(content => console.log(content))
|
70 | //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
|
71 | .catch(err => { throw err; });
|
72 | ```
|
73 |
|
74 | ### Callback
|
75 | ```js
|
76 | const DataURI = require('datauri');
|
77 | const datauri = new DataURI();
|
78 |
|
79 | datauri.encode('test/myfile.png', (err, content) => {
|
80 | if (err) {
|
81 | throw err;
|
82 | }
|
83 |
|
84 | console.log(content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
|
85 |
|
86 | console.log(this.mimetype); //=> "image/png"
|
87 | console.log(this.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..."
|
88 | console.log(this.getCSS()); //=> "\n.case {\n background-image: url('data:image/png;base64,iVBORw..."
|
89 | console.log(this.getCSS({
|
90 | class: "myClass",
|
91 | width: true,
|
92 | height: true
|
93 | })); //=> adds image width and height and custom class name
|
94 | });
|
95 |
|
96 | ```
|
97 |
|
98 |
|
99 | ### Synchronous Class
|
100 | If DataURI class is instanciated with a file path, the same will be processed synchronously.
|
101 |
|
102 | ```js
|
103 | const Datauri = require('datauri');
|
104 | let datauri = new Datauri('test/myfile.png');
|
105 |
|
106 | console.log(datauri.content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
|
107 | console.log(datauri.mimetype); //=> "image/png"
|
108 | console.log(datauri.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..."
|
109 | console.log(datauri.getCSS()); //=> "\n.case {\n background-image: url('data:image/png;base64,iVBORw..."
|
110 | console.log(datauri.getCSS("myClass")); //=> "\n.myClass {\n background-image: url('data:image/png;base64,iVBORw..."
|
111 | ```
|
112 |
|
113 | ### Synchronous Function
|
114 | ```js
|
115 | const Datauri = require('datauri').sync;
|
116 |
|
117 | console.log(Datauri('test/myfile.png')); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
|
118 | ```
|
119 | or for ES2015/6 lovers
|
120 |
|
121 | ```js
|
122 | import { sync as DataURI } from 'datauri';
|
123 |
|
124 | console.log(DataURI('test/myfile.png')); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
|
125 | ```
|
126 |
|
127 | ### From a Buffer
|
128 | If you already have your file as a Buffer, use this. It's much faster than passing a string.
|
129 |
|
130 | ```js
|
131 | const Datauri = require('datauri'),
|
132 | const datauri = new Datauri();
|
133 |
|
134 | //...
|
135 | const buffer = fs.readFileSync('./hello');
|
136 | //...
|
137 |
|
138 | datauri.format('.png', buffer);
|
139 |
|
140 | console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
|
141 | console.log(datauri.mimetype); //=> "image/png"
|
142 | console.log(datauri.base64); //=> "eGtjZA=="
|
143 | console.log(datauri.getCSS({
|
144 | class: "myClass",
|
145 | width: true,
|
146 | height: true
|
147 | })); //=> adds image width and height and custom class name
|
148 |
|
149 | ```
|
150 |
|
151 | ### From a string
|
152 | ```js
|
153 | const DataURI = require('datauri');
|
154 | const datauri = new Datauri();
|
155 |
|
156 | datauri.format('.png', 'xkcd');
|
157 |
|
158 | console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
|
159 | console.log(datauri.mimetype); //=> "image/png"
|
160 | console.log(datauri.base64); //=> "eGtjZA=="
|
161 | console.log(datauri.getCSS({
|
162 | class: "myClass",
|
163 | width: true,
|
164 | height: true
|
165 | })); //=> adds image width and height and custom class name
|
166 |
|
167 | ```
|
168 |
|
169 | #### Method chaining
|
170 | ```js
|
171 | //...
|
172 | datauri
|
173 | .on('encoded', content => {
|
174 | console.log(content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
|
175 | console.log(this.mimetype); //=> "image/png"
|
176 | console.log(this.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..."
|
177 | console.log(this.getCSS()); //=> "\n.case {\n background-image: url('data:image/png;base64,iVBORw..."
|
178 | console.log(this.getCSS({
|
179 | class: "myClass"
|
180 | }); //=> "\n.myClass {\n background-image: url('data:image/png;base64,iVBORw..."
|
181 | })
|
182 | .on('error', err => console.error(err))
|
183 | .encode('test/myfile.png');
|
184 | ```
|
185 |
|
186 | DEVELOP
|
187 | -------
|
188 |
|
189 | ```CLI
|
190 | $ npm install
|
191 | ```
|
192 |
|
193 | To run test specs
|
194 |
|
195 | ```CLI
|
196 | $ npm test
|
197 | ```
|
198 |
|
199 | ## Requirements
|
200 |
|
201 | Node.js 4+
|
202 |
|
203 | ## License
|
204 |
|
205 | MIT License
|
206 | (c) [Data-URI.js](http://github.com/data-uri)
|