imclab / vintagejs

Add a retro/vintage effect to images using the HTML5 canvas element

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: (int)[0-255], g: (int)[0-255], b: (int)[0-255], a: (float):[0-1] } 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: (intArray){256}[0-255], g: (intArray){256}[0-255], b: (intArray){256}[0-255] } 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.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