datauri

A simple Data URI scheme module and client for Node.js and io.js

datauri

A simple Data URI scheme module and client for Node.js and io.js. To install datauri, just run:

npm install -g datauri (it may require Root privileges)

CLIENT

Print datauri scheme

To print a data-uri scheme from a file

$ datauri brand.png

CSS Background

You can generate or update an output css file with data-uri background:

$ datauri brand.png asset/background.css

If you want to define a Class Name, just type:

$ datauri brand.png asset/background.css MyNewClass

MODULE

Function

var Datauri = require('datauri'),
    dUri    = Datauri('test/myfile.png');
 
console.log(dUri); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." 

Class

var Datauri = require('datauri'),
    dUri    = new Datauri('test/myfile.png');
 
console.log(dUri.content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." 
console.log(dUri.mimetype); //=> "image/png" 
console.log(dUri.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..." 
console.log(dUri.getCss()); //=> "\n.case {\n    background: url('data:image/png;base64,iVBORw..." 
console.log(dUri.getCss("myClass")); //=> "\n.myClass {\n    background: url('data:image/png;base64,iVBORw..." 

Async

var Datauri = require('datauri'),
    dUri    = new Datauri();
 
dUri.on('encoded', function (content) {
    console.log(content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."; 
});
 
dUri.on('error', function (content) {
    console.log('Fail!');
});
 
dUri.encode('test/myfile.png');

Chaining all stuff

dUri.on('encoded', function (content) {
 
        console.log(content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." 
 
        console.log(this.mimetype); //=> "image/png" 
        console.log(this.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..." 
        console.log(this.getCss()); //=> "\n.case {\n    background: url('data:image/png;base64,iVBORw..." 
        console.log(this.getCss("myClass")); //=> "\n.myClass {\n    background: url('data:image/png;base64,iVBORw..." 
    })
    .on('error', function (content) {
        console.log('Fail!');
    })
    .encode('test/myfile.png');

Function callback

var DataURI = require('datauri');
 
DataURI('test/myfile.png', function (err, content) {
    if (err) {
        throw err;
    }
 
    console.log(content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." 
 
    console.log(this.mimetype); //=> "image/png" 
    console.log(this.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..." 
    console.log(this.getCss()); //=> "\n.case {\n    background: url('data:image/png;base64,iVBORw..." 
    console.log(this.getCss("myClass")); //=> "\n.myClass {\n    background: url('data:image/png;base64,iVBORw..." 
});
 

Promises /A+ standard

var DataURI = require('datauri').promises;
 
DataURI('test/myfile.png').then(function (content) {
    console.log(content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." 
},
function (err) {
    throw err;
});
 

Create from a string

var Datauri = require('datauri'),
    dUri    = new Datauri();
 
dUri.format('.png', 'xkcd');
 
console.log(dUri.content); //=> "data:image/png;base64,eGtjZA==" 
console.log(dUri.mimetype); //=> "image/png" 
console.log(dUri.base64); //=> "eGtjZA==" 
console.log(dUri.getCss("myClassName")); //=> "\n.myClassName {\n    background: url('data:image/png;base64,eGtjZA==..." 
 

Create from a Buffer

If you already have your file as a Buffer, use this. It's much faster than passing a string.

var Datauri = require('datauri'),
    dUri    = new Datauri();
 
//... 
var buffer = fs.readFileSync('./hello');
//... 
 
dUri.format('.png', buffer);
 
console.log(dUri.content); //=> "data:image/png;base64,eGtjZA==" 
console.log(dUri.mimetype); //=> "image/png" 
console.log(dUri.base64); //=> "eGtjZA==" 
console.log(dUri.getCss("myClassName")); //=> "\n.myClassName {\n    background: url('data:image/png;base64,eGtjZA==..." 
 

GRUNT

There are a bunch of grunt plugins running on top of datauri module.

• grunt-datauri - Create base64 encoded data-uris for css from images
• grunt-imweb - IMWEB Tasks Collection For Daily Workflow.
• grunt-static-inline - A grunt plugin to replace url from static files such as img,js,css an put inline in a template.
• grunt-data-uri - Convert to data-uri from image path.
• grunt-inline

GULP

• gulp-image-data-uri - A Gulp plugin for converting images to inline data-URIs. Intended to be a simple single-purpose wrapper for heldr/datauri.

DEVELOPING

The only essential library to develop datauri is jshint.

$ make install
$ make test

If you'd like to test the full process including npm installer, just run:

$ make fulltest

Release notes

• 0.6 - io.js support
• 0.5 - Format data uri from a string
• 0.4 - Promises support
• 0.3 - API Rewritten from the top to the bottom + full async compatibility
• 0.2 - Splitted in submodules mimer and templayed
• 0.1 - First release

License

MIT License (c) Helder Santana