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