Add a retro/vintage effect to images using the HTML5 canvas element
Clone or download
rendro v2.2.0
* merged PR #38
* updated documentation
* updated flow types
* bump version number
* fix formatting (trailing comma)
Latest commit c6e5fc0 Oct 20, 2017
Permalink
Failed to load latest commit information.
dist ADDED crossOrigin header for loading viewfinder images Oct 19, 2017
examples update readme Mar 5, 2017
flow-typed/npm add curves, contrast, brightness and screen support Feb 21, 2017
src v2.2.0 Oct 20, 2017
test add mocha test Feb 26, 2017
.babelrc add umd module and minified version to dist folder Mar 4, 2017
.flowconfig add umd module and minified version to dist folder Mar 4, 2017
.gitignore add viewfinder support Feb 26, 2017
LICENSE rename license.txt to LICENSE Feb 21, 2017
Readme.md v2.2.0 Oct 20, 2017
bower.json v2.1.0 Mar 5, 2017
header.jpg update readme Mar 5, 2017
package-lock.json v2.2.0 Oct 20, 2017
package.json
yarn.lock add umd module and minified version to dist folder Mar 4, 2017

Readme.md

vintageJS

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

npm npm Greenkeeper badge

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