vintageJS

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

Download Tweet

Demo

↻
‹ ›

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.

with jQuery
<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>
without dependencies (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

<img vintage="option:value;option:value;.." src="picture.jpg" />
<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>

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:

See more details on canisue.com/canvas.

Open Source License

vintageJS is dual licensed under the MIT and GPL licenses.

built with ❤ by Robert Fleischmann