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

jQuery Client Side Image Cropping Plugin with Canvas and CSS3 - Simple Cropper
File Size: 75 KB
Views Total:
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:

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.