vintageJS

Add a retro/vintage effect to images using the HTML5 canvas element.

Installation

$ npm install vintagejs

How to use

vintagejs is a function that takes a source (URL, ImageElement or CanvasElement) and an effect (object with all the options) and returns a Promise that resolves to a result object.

vintagejs('./path/to/picture.jpg', { brightness: 0.2 })
  .then(res => res.genImage())
  .then(img => document.body.appendChild(img));

The result object provides the following methods to access the modified image data:

// returns the data url of the updated image. Use it to update the source of an existing image
getDataURL(mimeType?: string, quality?: number): string;
// returns the canvas with the updated image. Use it to draw your changes onto another canvas
getCanvas(): HTMLCanvasElement;
// returns a promise that resolves to an HTMLImageElement of the updated image
genImage(mimeType?: string, quality?: number): Promise<HTMLImageElement>;

If not provided, mimeType defaults to image/jpeg and quality defaults to 1.

More Examples

// use an image as source and update image with data url
const srcEl = document.querySelector('img.myImage');
vintagejs(srcEl, { brightness: 0.2 })
  .then(res => {
    srcEl.src = res.getDataURL();
  });

// use a canvas as source and draw result to canvas
const srcEl = document.querySelector('canvas.myCanvas');
const ctx = srcEl.getContext('2d');
vintagejs(srcEl, { brightness: 0.2 })
  .then(res => {
    ctx.drawImage(res.getCanvas(), 0, 0, srcEl.width, srcEl.height);
  });

Effect options

type TEffect = {
  curves: false | TCurve,     // default: false
  screen: false | TRGBAColor, // default: false
  saturation: number,         // float between 0 and 1, default: 1
  vignette: number,           // float between 0 and 1, default: 0
  lighten: number,            // float between 0 and 1, default: 0
  viewfinder: false | string, // string must be URL, default: false
  sepia: boolean,             // default: false
  gray: boolean,              // default: false
  brightness: number,         // float between -1 and 1, default: 0
  contrast: number,           // float between -1 and 1, default: 0
};

// every channel, r=red, g=green, b=blue serves as a look up table for color mappings
type TCurve = {
  r: Array<Uint8> | Uint8ClampedArray, // array of int between 0 and 255, length of array === 256
  g: Array<Uint8> | Uint8ClampedArray, // array of int between 0 and 255, length of array === 256
  b: Array<Uint8> | Uint8ClampedArray, // array of int between 0 and 255, length of array === 256
};

type TRGBAColor = {
  r: Uint8,  // int between 0 and 255
  g: Uint8,  // int between 0 and 255
  b: Uint8,  // int between 0 and 255
  a: number, // float between 0 and 1
};

Examples

const noEffect = {};

const effect_1 = {
  brightness: -0.2,
  contrast: 0.15,
};

const effect_2 = {
  brightness: 0.1,
  vignette: 0.3,
  viewfinder: './film-1.jpg',
  screen: {
    r: 227,
    g: 12,
    b: 169,
    a: 0.15,
  },
};

See examples folder for more examples.

Browser support

Check support for the canvas element canisue.com/canvas.

Higher performance when canvas blend modes are supported caniuse.com/#feat=canvas-blending, but fallbacks are implemented.

License

MIT

Changelog

2.2.0

Added true grayscale effect (Thanks @bjornbos for PR #38)

2.1.0

Add support for strings (URI or base64 encoded data-uri) as a source

2.0.0

Rewrite from ground up
Functional API

1.1.5

Added "main" field to package.json

1.1.4

Added universal module definition (umd) wrapper

1.1.3

Added minified versions
Fixed same-origin error

1.1.2

added AngularJS support thanks to @dpiccone
grunt based build script for all versions

1.1.1

performance improvements
new effect options:
- brightness
- contrast

1.1.0

Improved core performance

1.0.0

Initial release

rendro/vintageJS