Canvas Based jQuery Photo Editing Plugin - PhotoJShop

PhotoJShop is a jQuery image editing plugin that makes use of Html canvas element and javascript to apply effects, color filters and custom effect matrix on a photo.

Effects supported:

• Blur
• Blur (rad=4)
• Sharpen
• Lighten
• Darken
• Emboss
• Edge enhance
• Edge detect

Filters supported:

• b&w
• sepia
• vintage
• recolor
• red
• blue
• green

Basic usage:

1. Load the latest jQuery javascript library and photojshop.jquery.js script somewhere in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/photojshop.jquery.js"></script>

2. Insert an image on your web page.

<img src="demo.jpg" id="demo" alt="Jack" />

3. Create a link with data-* attributes to apply an effect & filter on the image.

<a href="#effect" data-effect="blur">Blur</a>

4. The javascript.

<script type="text/javascript">
$(document).ready(function(){
$('#effects a').click(function(e){
e.preventDefault();
$('#demo').PhotoJShop({
'effect' : $(this).attr("data-effect")
});
return true;
});
});
</script>

5. You can also apply the effects or filters in the javascript without using data-* attributes.

<script type="text/javascript">
$(document).ready(function(){
$('#demo').PhotoJShop({
  effect: "blur", // Select the effect you want to apply
  color: "b&w", // Select a color effect you want to apply
  replace: false, // If true the result of the filter will replace the original image/canvas data and return the jQuery object for chainability. If false it will return the dataURL of the resulting image
  matrix: [ [1.5] ] // Use this with the custom effect (Although if you set the matrix you don't have to specify the effect), the matrix can be any size, but it must be in JavaScript format.
});
});
});
</script>

---

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