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.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

Related Repositories

Top Contributors

Dependencies

	package	version
	nullthrows	^1.0.0
dev	assert	^1.4.1
	babel-cli	^6.23.0
	babel-plugin-add-module-exports	^0.2.1
	babel-plugin-syntax-flow	^6.18.0
	babel-plugin-transform-flow-strip-types	^6.22.0
	babel-preset-es2015	^6.22.0
	babel-preset-stage-0	^6.22.0
	babelify	^7.3.0
	browserify	^14.1.0
	expect.js	^0.3.1
	flow-bin	^0.41.0
	flow-typed	^2.0.0
	mocha	^3.2.0
	sinon	^1.17.7
	uglify-js	^2.8.5