Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

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

branch: master
Readme.md

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
Something went wrong with that request. Please try again.