rendro / Vintagejs
Licence: mit
Add a retro/vintage effect to images using the HTML5 canvas element
Stars: ✭ 826
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vintagejs
Photoeditor
A Photo Editor library with simple, easy support for image editing using paints,text,filters,emoji and Sticker like stories.
Stars: ✭ 3,105 (+275.91%)
Mutual labels: image-processing, instagram, canvas
Gradex
An online tool to generate gradients background from given image so you can preview and download it.
Stars: ✭ 145 (-82.45%)
Mutual labels: image-processing, canvas
Deepfriedmemes.com
🅱️ Deep fries your pics. Serve with laundry sauce.
Stars: ✭ 131 (-84.14%)
Mutual labels: image-processing, canvas
Instagrid Js
A Javascript library to do exactly what Instagram Layout application does
Stars: ✭ 13 (-98.43%)
Mutual labels: instagram, canvas
React Tint
A React component that applies image processing filters to an image using Processing
Stars: ✭ 89 (-89.23%)
Mutual labels: image-processing, canvas
Ditherjs
A javascript library which dithers an <img> using a fixed palette
Stars: ✭ 76 (-90.8%)
Mutual labels: retro, canvas
Filterous 2
Instagram-like photo manipulation library for Node.js and Javascript on browser
Stars: ✭ 163 (-80.27%)
Mutual labels: instagram, canvas
Ananas
An easy image editor integration for your Android apps.
Stars: ✭ 186 (-77.48%)
Mutual labels: instagram, canvas
Letterbox
Go program to batch-process letter-boxing of photographs.
Stars: ✭ 147 (-82.2%)
Mutual labels: image-processing, instagram
Gaussianblur
An easy and fast library to apply gaussian blur filter on any images. 🎩
Stars: ✭ 473 (-42.74%)
Mutual labels: image-processing, canvas
One Html Page Challenge
Can you create something cool without modern tools?
Stars: ✭ 205 (-75.18%)
Mutual labels: retro, canvas
Photo Editor Android
Photo Editor SDK contains a lot of features like edit, scale, rotate and draw on images like Instagram stories.
Stars: ✭ 463 (-43.95%)
Mutual labels: image-processing, instagram
Stealing Ur Feelings
Winner of Mozilla's $50,000 prize for art and advocacy exploring AI
Stars: ✭ 784 (-5.08%)
Mutual labels: instagram
Automatic Watermark Detection
Project for Digital Image Processing
Stars: ✭ 754 (-8.72%)
Mutual labels: image-processing
Origami.js
Powerful and Lightweight Library to create using HTML5 Canvas
Stars: ✭ 750 (-9.2%)
Mutual labels: canvas
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].