datauri

What is datauri?

The datauri npm package is used to convert file paths or file buffers to Data URI scheme. This is particularly useful for embedding file data directly into HTML or CSS files.

What are datauri's main functionalities?

Convert File Path to Data URI

This feature allows you to convert a file path to a Data URI. The `format` method takes the file extension and the file path as arguments and returns an object containing the Data URI.

const Datauri = require('datauri');
const dUri = new Datauri();
const result = dUri.format('.png', 'path/to/file.png');
console.log(result.content);

Convert Buffer to Data URI

This feature allows you to convert a buffer to a Data URI. The `format` method takes the file extension and the buffer as arguments and returns an object containing the Data URI.

const Datauri = require('datauri');
const dUri = new Datauri();
const buffer = Buffer.from('some data');
const result = dUri.format('.txt', buffer);
console.log(result.content);

Convert File Path to Data URI (Async)

This feature allows you to convert a file path to a Data URI using an asynchronous method. The `promise` method takes the file path as an argument and returns a promise that resolves to the Data URI.

const Datauri = require('datauri');
const dUri = new Datauri();
const result = await dUri.promise('path/to/file.png');
console.log(result);

Other packages similar to datauri

base64-img

The base64-img package allows you to convert images to base64 strings and vice versa. While it is more focused on image files, it provides similar functionality for converting files to Data URIs.

file-base64

The file-base64 package is another alternative that focuses on converting files to base64 strings. It provides a simple API for encoding and decoding files, similar to datauri.

README

datauri

A simple Data URI scheme generator built on top of Node.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

API

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==..."

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

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.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