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

Node.js Module and Client to generate Data URI scheme.

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.

from: Wikipedia

MODULE

npm install --save datauri

1. From file path

• Asynchronous
  • Readable Stream
  • Promise
  • Callback
• Synchronous
  • Class
  • Function

1. From a Buffer
2. From a String
3. Method chaining
4. Task plugins using datauri

• npm script
• gulp
• grunt

1. Develop
2. License
3. ChangeLog
4. Tools using datauri

Readable Stream

const Datauri = require('datauri');
const datauri = new Datauri();

datauri.pipe(process.stdout);
datauri.encode('test/myfile.png');

const Datauri = require('datauri');
const datauri = new Datauri();

datauri.on('encoded', content => console.log(content));
//=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";

datauri.on('error', err => console.log(err));
datauri.encode('test/myfile.png');

Promise (node 0.12+, works with es2016 async/await)

'use strict';

const DataURI = require('datauri').promise;
// babelers: import { promise as DataURI } from 'datauri';

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

Callback

const DataURI = require('datauri');
const datauri = new DataURI();

datauri.encode('test/myfile.png', (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-image: url('data:image/png;base64,iVBORw..."
  console.log(this.getCSS({
    class: "myClass",
    width: true,
    height: true
  })); //=> adds image width and height and custom class name
});

Synchronous Class

If DataURI class is instanciated with a file path, the same will be processed synchronously.

const Datauri = require('datauri');
let   datauri = new Datauri('test/myfile.png');

console.log(datauri.content); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
console.log(datauri.mimetype); //=> "image/png"
console.log(datauri.base64); //=> "iVBORw0KGgoAAAANSUhEUgAA..."
console.log(datauri.getCSS()); //=> "\n.case {\n    background-image: url('data:image/png;base64,iVBORw..."
console.log(datauri.getCSS("myClass")); //=> "\n.myClass {\n    background-image: url('data:image/png;base64,iVBORw..."

Synchronous Function

const Datauri = require('datauri').sync;

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

or for ES2015/6 lovers

import { sync as DataURI } from 'datauri';

console.log(DataURI('test/myfile.png')); //=> "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."

From a Buffer

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

const Datauri = require('datauri'),
const datauri = new Datauri();

//...
const buffer = fs.readFileSync('./hello');
//...

datauri.format('.png', buffer);

console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
console.log(datauri.mimetype); //=> "image/png"
console.log(datauri.base64); //=> "eGtjZA=="
console.log(datauri.getCSS({
  class: "myClass",
  width: true,
  height: true
})); //=> adds image width and height and custom class name

From a string

const DataURI = require('datauri');
const datauri = new Datauri();

datauri.format('.png', 'xkcd');

console.log(datauri.content); //=> "data:image/png;base64,eGtjZA=="
console.log(datauri.mimetype); //=> "image/png"
console.log(datauri.base64); //=> "eGtjZA=="
console.log(datauri.getCSS({
  class: "myClass",
  width: true,
  height: true
})); //=> adds image width and height and custom class name

Method chaining

//...
datauri
  .on('encoded', 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-image: url('data:image/png;base64,iVBORw..."
    console.log(this.getCSS({
      class: "myClass"
    }); //=> "\n.myClass {\n    background-image: url('data:image/png;base64,iVBORw..."
  })
  .on('error', err => console.error(err))
  .encode('test/myfile.png');

DEVELOP

$ npm install
$ npm run check

To run test specs

$ npm run spec

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

$ npm run fulltest

License

MIT License (c) Helder Santana