jQuery Client Side Image Cropping Plugin with Canvas and CSS3 - Simple Cropper

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.