First load Jquery :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

Grab the SOURCE then load imgfx.js:

<script type="text/javascript" src="path-to-js/imgfx.min.js"></script>

To apply an effect to an image by id , class or tag or a just target <img/> element with the usual Jquery way:

<script type="text/javascript"> $("img").imgfx({parameters});///will apply to all images on the page $(".a-class").imgfx({parameters});//will apply to all images with same class $(".#an-id").imgfx({parameters});//will apply to image targetted by id </script>

Some of the FX will not work on images that are not on the same server due to the same origin policy.

By the way it works when the remote server send the adequat CORS hearders.

By default the plug-in sets the .crossOrigin attribute of images to "Anonymous".

img.crossOrigin = "Anonymous";

Parameters:

You can read more about this issue here : https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

The plug-in have a lot off parameters that allow you to play with.

Some are common to different effects:

mode

mode:"tv"

This parameters allow you to choose the fx you want to use

blendMode

blendMode: "difference",

You can choose between all of this values:

normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity |clear | copy | destination | source-over | destination-over | source-in | destination-in | source-out | destination-out | source-atop | destination-atop | xor | lighter

This parameters controls the CanvasRenderingContext2D.globalCompositeOperation property for the FX that uses it.

"tv","glitch","zoom","bumpingrect" and "randomsquares" makes use of it.

I think it's fun to play with.

canvassize

canvassize:2,

This parameter control the size of the canvas by dividing the original image size.

set it to 1 if you want to keep your original image size (and burn your visitor's CPU)

crossOrigin

canvassize:"Anonymous",

Can be usefull for CORS settings.