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:
getDataURL(mimeType?: string, quality?: number): string;
getCanvas(): HTMLCanvasElement;
genImage(mimeType?: string, quality?: number): Promise<HTMLImageElement>;
If not provided, mimeType defaults to image/jpeg
and quality defaults to 1
.
More Examples
const srcEl = document.querySelector('img.myImage');
vintagejs(srcEl, { brightness: 0.2 })
.then(res => {
srcEl.src = res.getDataURL();
});
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,
screen: false | TRGBAColor,
saturation: number,
vignette: number,
lighten: number,
viewfinder: false | string,
sepia: boolean,
gray: boolean,
brightness: number,
contrast: number,
};
type TCurve = {
r: Array<Uint8> | Uint8ClampedArray,
g: Array<Uint8> | Uint8ClampedArray,
b: Array<Uint8> | Uint8ClampedArray,
};
type TRGBAColor = {
r: Uint8,
g: Uint8,
b: Uint8,
a: number,
};
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:
1.1.0
- Improved core performance
1.0.0