Canvas Based jQuery Photo Editing Plugin - PhotoJShop
File Size: | 162KB |
---|---|
Views Total: | 8519 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.