UNPKG

6.2 kBMarkdownView Raw
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
10Node.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
14from: [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
18MODULE
19-------
20`npm install --save datauri`
21
221. [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)
302. [From a Buffer](#from-a-buffer)
313. [From a String](#from-a-string)
324. [Method chaining](#method-chaining)
335. [Task plugins using datauri](#tools-using-datauri)
34 * [npm script](#npm-script)
35 * [gulp](#gulp)
36 * [grunt](#grunt)
376. [Develop](#develop)
387. [License](#license)
398. [ChangeLog](https://github.com/heldr/datauri/releases)
409. [Tools using datauri](https://github.com/heldr/datauri/blob/master/README.md#tools-using-datauri)
41
42### Readable Stream
43```js
44const Datauri = require('datauri');
45const datauri = new Datauri();
46
47datauri.pipe(process.stdout);
48datauri.encode('test/myfile.png');
49```
50
51```js
52const Datauri = require('datauri');
53const datauri = new Datauri();
54
55datauri.on('encoded', content => console.log(content));
56//=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
57
58datauri.on('error', err => console.log(err));
59datauri.encode('test/myfile.png');
60```
61
62### Promise (node 0.12+, works with es2016 async/await)
63```js
64'use strict';
65
66const DataURI = require('datauri').promise;
67// babelers: import { promise as DataURI } from 'datauri';
68
69DataURI('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
77const DataURI = require('datauri');
78const datauri = new DataURI();
79
80datauri.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
101If DataURI class is instanciated with a file path, the same will be processed synchronously.
102
103```js
104const Datauri = require('datauri');
105let datauri = new Datauri('test/myfile.png');
106
107console.log(datauri.content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
108console.log(datauri.mimetype); //=> "image/png"
109console.log(datauri.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..."
110console.log(datauri.getCSS()); //=> "\n.case {\n background-image: url('data:image/png;base64,iVBORw..."
111console.log(datauri.getCSS("myClass")); //=> "\n.myClass {\n background-image: url('data:image/png;base64,iVBORw..."
112```
113
114### Synchronous Function
115```js
116const Datauri = require('datauri').sync;
117
118console.log(Datauri('test/myfile.png')); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
119```
120or for ES2015/6 lovers
121
122```js
123import { sync as DataURI } from 'datauri';
124
125console.log(DataURI('test/myfile.png')); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
126```
127
128### From a Buffer
129If you already have your file as a Buffer, use this. It's much faster than passing a string.
130
131```js
132const Datauri = require('datauri'),
133const datauri = new Datauri();
134
135//...
136const buffer = fs.readFileSync('./hello');
137//...
138
139datauri.format('.png', buffer);
140
141console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
142console.log(datauri.mimetype); //=> "image/png"
143console.log(datauri.base64); //=> "eGtjZA=="
144console.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
154const DataURI = require('datauri');
155const datauri = new Datauri();
156
157datauri.format('.png', 'xkcd');
158
159console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
160console.log(datauri.mimetype); //=> "image/png"
161console.log(datauri.base64); //=> "eGtjZA=="
162console.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//...
173datauri
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
187DEVELOP
188-------
189
190```CLI
191$ npm install
192$ npm run check
193```
194
195To run test specs
196
197```CLI
198$ npm run spec
199```
200
201If 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
209MIT License
210(c) [Helder Santana](http://heldr.com)