UNPKG

6.19 kBMarkdownView Raw
1<h1 align="center">
2 <br>
3 <img width="365" src="https://cdn.rawgit.com/heldr/datauri/master/media/datauri.svg" alt="datauri">
4 <br>
5 <br>
6 <br>
7</h1>
8
9Node.js [Module](#module) and [Client](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
13from: [Wikipedia](http://en.wikipedia.org/wiki/Data_URI_scheme)
14
15[![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)
16
17MODULE
18-------
19`npm install --save datauri`
20
211. [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)
292. [From a Buffer](#from-a-buffer)
303. [From a String](#from-a-string)
314. [Method chaining](#method-chaining)
325. [Task plugins using datauri](#tools-using-datauri)
33 * [npm script](#npm-script)
34 * [gulp](#gulp)
35 * [grunt](#grunt)
366. [Develop](#develop)
377. [License](#license)
388. [ChangeLog](https://github.com/heldr/datauri/releases)
399. [Tools using datauri](https://github.com/heldr/datauri/blob/master/README.md#tools-using-datauri)
40
41### Readable Stream
42```js
43const Datauri = require('datauri');
44const datauri = new Datauri();
45
46datauri.pipe(process.stdout);
47datauri.encode('test/myfile.png');
48```
49
50```js
51const Datauri = require('datauri');
52const datauri = new Datauri();
53
54datauri.on('encoded', content => console.log(content));
55//=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
56
57datauri.on('error', err => console.log(err));
58datauri.encode('test/myfile.png');
59```
60
61### Promise (node 0.12+, works with es2016 async/await)
62```js
63'use strict';
64
65const DataURI = require('datauri').promise;
66// babelers: import { promise as DataURI } from 'datauri';
67
68DataURI('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
76const DataURI = require('datauri');
77const datauri = new DataURI();
78
79datauri.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
100If DataURI class is instanciated with a file path, the same will be processed synchronously.
101
102```js
103const Datauri = require('datauri');
104let datauri = new Datauri('test/myfile.png');
105
106console.log(datauri.content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
107console.log(datauri.mimetype); //=> "image/png"
108console.log(datauri.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..."
109console.log(datauri.getCSS()); //=> "\n.case {\n background-image: url('data:image/png;base64,iVBORw..."
110console.log(datauri.getCSS("myClass")); //=> "\n.myClass {\n background-image: url('data:image/png;base64,iVBORw..."
111```
112
113### Synchronous Function
114```js
115const Datauri = require('datauri').sync;
116
117console.log(Datauri('test/myfile.png')); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
118```
119or for ES2015/6 lovers
120
121```js
122import { sync as DataURI } from 'datauri';
123
124console.log(DataURI('test/myfile.png')); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
125```
126
127### From a Buffer
128If you already have your file as a Buffer, use this. It's much faster than passing a string.
129
130```js
131const Datauri = require('datauri'),
132const datauri = new Datauri();
133
134//...
135const buffer = fs.readFileSync('./hello');
136//...
137
138datauri.format('.png', buffer);
139
140console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
141console.log(datauri.mimetype); //=> "image/png"
142console.log(datauri.base64); //=> "eGtjZA=="
143console.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
153const DataURI = require('datauri');
154const datauri = new Datauri();
155
156datauri.format('.png', 'xkcd');
157
158console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
159console.log(datauri.mimetype); //=> "image/png"
160console.log(datauri.base64); //=> "eGtjZA=="
161console.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//...
172datauri
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
186DEVELOP
187-------
188
189```CLI
190$ npm install
191$ npm run check
192```
193
194To run test specs
195
196```CLI
197$ npm run spec
198```
199
200If you'd like to test the full process including npm installer, just run:
201
202```CLI
203$ npm run fulltest
204```
205
206## License
207
208MIT License
209(c) [Helder Santana](http://heldr.com)