vintageJS
Add a retro/vintage effect to images using the HTML5 canvas element.
How to use
You can decide to use vintageJS as a jQuery plugin, as an AngularJS module or implement the vanilla version without any dependencies.
jQuery
The jQuery version works with jQuery 1.2.3+
<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="jquery.vintage.js"></script>
<script>
var options = {
onError: function() {
alert('ERROR');
}
};
var effect = {
vignette: 0.6,
sepia: true
};
$('img#yourImage').vintage(options, effect);
</script>
vanilla
<script src="vintage.js"></script>
<script>
var img = document.getElementById('yourImage');
var options = {
onError: function() {
alert('ERROR');
}
};
var effect = {
vignette: 0.6,
sepia: true
};
new VintageJS(img, options, effect);
</script>
AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="angular.vintage.js"></script>
<script>
var app = angular.module('app',['vintagejs']);
</script>
And the html...
<img vintage="option:value;option:value;.." src="picture.jpg" />
Options
You can configure vintageJS with the following options:
onStart |
Callback function that is executed before the effect is calculated |
onStop |
Callback function that is executed after the effect is renderd |
onError |
Callback function that is executed if any error occures |
mime |
Mime type of the output image. Default is image/jpeg |
Effect options
In the vintage.presets.js
file you find a few presets to see how the options work. If you have built a great effect by yourself, do not hesitate to send a pull request, I appreciate every contribution.
Name | Value | Description |
---|---|---|
brightness |
integer from -255 to 255 | Change the brightness of the image |
contrast |
integer from -255 to 255 | Increase or decrease the contrast of the image |
vignette |
float from 0 to 1 | A black vignette a the edges of the image |
lighten |
float from 0 to 1 | Lighten the center of the image |
desaturate |
float from 0 to 1 | Desaturate the image |
noise |
integer | Add a noise to the image. The bigger the number the stronger the noise |
sepia |
boolean | Sepia effect |
viewFinder |
string: path to image | Add a viewfinder image |
screen |
object | Screen in another color. The object must have the following structure:
r,b,g represent the color and a defines the strength of the screen.
|
curves |
object | Map one color value to another by providing an object with the properties r,g,b each containing an array with 256 enties for the color mapping:
r,b,g representing the color channels
|
vintage-API
Every instance of vintageJS returns an API object to manipulate the image. In the jQuery version this API is stored in the data of the element and can be accessed in the following way:
var vjsAPI = $('#yourImage').data('vintageJS');
The API has the following three methods:
vintage(effect) |
Render a new effect for the image. The current effect will be overwritten. |
apply() |
Apply the current effect on the image. All further effects are rendered on the basis of the current state of the image. Use this method if you want to render multiple effects on one image. |
reset() |
Reset the image to the original state (or the last applied state). |
Browser support
As vintageJS relies on the HTML5 canvas element it supports the following browsers:
- Mozilla Firefox
- Google Chrome
- Apple Safari
- Opera
- Internet Explorer 9+
See more details on canisue.com/canvas.
Open Source License
vintageJS is dual licensed under the MIT and GPL licenses.
Changelog
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:
- brightness
- contrast
Version 1.1.0 - May 19, 2013
- New and faster core
Version 1.0.0 - Mar 17, 2011
- Initial release