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
571 Nov 21, 2022
35 Nov 30, 2022
175 Sep 29, 2021
123 Dec 27, 2022
8 May 6, 2022
808 Dec 18, 2022
289 Nov 1, 2022
455 Nov 6, 2022
976 Dec 30, 2022
19 Sep 25, 2022
63 Nov 10, 2022
195 Dec 30, 2022
34 Dec 16, 2022
120 Dec 23, 2022
171 Dec 29, 2022