jQuery Client Side Image Cropping Plugin with Canvas and CSS3 - Simple Cropper
File Size: | 75 KB |
---|---|
Views Total: | 22838 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SimpleCropper is a jQuery image cropping plugin that allows you to crop a local image and generate a new Base64 encoded image client side, based on Html5 canvas
element and CSS3. The plugin will automatically detect aspect ratio of an Html element and insert a cropped image into it.
See also:
- Facebook Style Image Cropping Plugin For jQuery - Drag'n'crop
- jQuery Plugin For Cropping Images - Fakecrop
- jQuery Plugin for Image Cropping Functionality - imgAreaSelect
How to use it:
1. Include the necessary javascript library files in the html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.Jcrop.js"></script> <script type="text/javascript" src="scripts/jquery.SimpleCropper.js"></script>
2. Include the required CSS files in the html document.
<link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css" />
3. Create an Html element to which you would like to attach Simple Cropper.
<div class="cropme" style="width: 405px; height: 200px;"></div>
4. Call the plugin on the element and you're done.
<script> $('.cropme').simpleCropper(); </script>
Change log:
2015-11-17
- Fixed issue with IE11
2015-06-11
- Added a callback function which is called with an object of all the data you need
This awesome jQuery plugin is developed by tomazdragar. For more Advanced Usages, please check the demo page or visit the official website.