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.
;
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: string;// returns the canvas with the updated image. Use it to draw your changes onto another canvas: HTMLCanvasElement;// returns a promise that resolves to an HTMLImageElement of the updated image: 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 urlconst srcEl = document; ; // use a canvas as source and draw result to canvasconst srcEl = document;const ctx = srcEl; ;
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 mappingstype 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: -02 contrast: 015; const effect_2 = brightness: 01 vignette: 03 viewfinder: './film-1.jpg' screen: r: 227 g: 12 b: 169 a: 015 ;
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