Apply Custom Effects To Photos Using jQuery and Canvas - tocanvas

tocanvas is a jquery plugin to overlay any image with a canvas so that you can add custom effects/filters to it.

How to use it:

1. Include jQuery library and the jQuery tocanvas plugin on your web page.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="src/jquery.toCanvas.js"></script>

2. Create a custom effect for your image.

var lomoLight = [
    { brightness: 10 },
    { saturation: 20 },
    { gamma: 1.4 },
    { vignette: { opacity: 0.8 } },
    { brightness: 5 }
];

3. Call the plugin to apply the effect on your image.

$(".toCanvas-lomo").toCanvas({
framerate: 0,
continuous: false,
hoverOpacity: 1,
opacity: 1,
overlay: true,
process: {},
sharedOptions: {},
zIndex: 10
});

Change logs:

2017-01-19

• Fix blur and boxblur

2015-04-30

• v0.2.0

2015-04-09

• Added playground demo! updated wrapper so it always returns the plugin.

2015-04-08

• updated demo with video, added continuous option

2015-04-03

• all options via object. Opacity settable for all filters using process!

2015-03-27

• add video support.

---

This awesome jQuery plugin is developed by SeeDoubleYou. For more Advanced Usages, please check the demo page or visit the official website.