PhotoJShop

A JavaScript photo editing library packaged in a simple jQuery plugin

PhotoJShop is a JavaScript library for photo editing using the canvas and kernel convolution matrixes, aiming to reproduce most usual filters. A demo of its capabilities can be seen in Nuophoto, a project that uses this library for all the editing (Although an older version)

The idea is to provide a simple library to developers that will allow quick integration of photo filters to their website.

Demo

If you clone the repo, simply open index.html, which is a very simple demo of the plugin's capabilities. The project has Github's pages enabled, so you can see the demo page online:

• PhotoJShop demo (Development)

Download

Head over to the releases list and grab the lastest one

Usage

After including jQuery, include photojshop.jquery.js. Once loaded you simply need to call it on a valid element. You have to ensure that the element has loaded, $(document).ready() doesn't mean images have loaded!

Right now it works on Canvas and images, so you would call it like so:

$('#img1').PhotoJShop("blur");

// The following would produce the same effect:
$('#img1').PhotoJShop({ effect : "blur"});

// Color effects can be applied at the same time:
$('#img1').PhotoJShop({
  effect  : "blur",
  color   : "b&w"
});

Effects can also be chained if replace is set to true (Which is by default)

$('img').PhotoJShop("blur").PhotoJShop("lighten");

You can also set replace to false, and obtain the dataURL of the filtered photo:

$('#image1').attr('src',
  $('#image2').PhotoJShop({
    effect : "blur",
    replace : false
  })
);

Do you want to do a non-implemented effect? Use the custom mode, and define your own matrix, in the example below we will use a version of blur that also lightens the image:

$('img').PhotoJShop({
  matrix :  [ [1, 1,  1],
              [1, 1.5,1],
              [1, 1,  1] ]
});
// That code is exactly the same as the following:
$('img').PhotoJShop({
  matrix :  [ [1.5] ]
});

You can use any size for the matrix, although it must be square. You can use a 1x1 matrix for example, which will lighten/darken the image if you use a bigger/lower value than 1.

Parameters

Changelog

1.0.4

• Add two new effects: Hard-edge and Laplace

1.0.1

• Add minified version
• Released in jQuery plugin repository

1.0.0

• First stable release

Meta

• Developed by Alejandro U. Álvarez
• Licensed under the MIT license.
• Contributors: -