vintageJS
Add a retro/vintage effect to images using the HTML5 canvas element.
How to use
vintagejs :: TSourceElement -> $Shape<TEffect> -> Promise<TResult>
The vintagejs
function takes two arguments, a source (url, base64 data uri, image element or canvas element) and an effect object and returns a promise that resolves to a result object with the following methods:
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
.
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);
});
vintagejs('./path/to/image.jpg', { brightness: 0.2 })
.then(res => res.genImage())
.then(img => {
document.body.appendChild(img);
});
Effect options
All properties on the effect object are optional. If you provide them however, you must follow these types:
type TEffect = {
curves: false | TCurve,
screen: false | TRGBAColor,
saturation: number,
vignette: number,
lighten: number,
viewfinder: false | string,
sepia: 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
Version 2.1.0 - Mar 5, 2017
- Add support for strings (URI or base64 encoded data-uri) as a source
Version 2.0.0 - Mar 4, 2017
- Rewrite from ground up
- Functional API
Version 1.1.5 - May 16, 2016
- Added "main" field to package.json
Version 1.1.4 - Oct 24, 2013
- Added universal module definition (umd) wrapper
Version 1.1.3 - Nov 19, 2013
- Added minified versions
- Fixed same-origin error
Version 1.1.2 - Jul 24, 2013
- added AngularJS support thanks to @dpiccone
- grunt based build script for all versions
Version 1.1.1 - May 20, 2013
- performance improvements
- new effect options:
Version 1.1.0 - May 19, 2013
Version 1.0.0 - Mar 17, 2011