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