Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vintagejs
Advanced tools
Readme
Add a retro/vintage effect to images using the HTML5 canvas element.
$ npm install vintagejs
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
.
// 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);
});
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
};
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.
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.
FAQs
Add a retro/vintage effect to images using the HTML5 canvas element
The npm package vintagejs receives a total of 7 weekly downloads. As such, vintagejs popularity was classified as not popular.
We found that vintagejs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.