Simple Cropper

Usage

1. Include all scripts and css files to your html file.
<!-- Css files--> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style-example.css" /> <link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css" /> <!-- Js files--> <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.Jcrop.js"></script> <script type="text/javascript" src="scripts/jquery.SimpleCropper.js"></script>
2. Create element, which you would like to attach the Simple Cropper and then call simpleCropper().
<!-- Create element to which you would like to attach Simple Cropper --> <div class="cropme"></div> <!-- Select all elements with class cropme and initialize Simple Cropper --> <script> $('.cropme').simpleCropper(); </script>
That's it! Your freshly cropped image resides (base64 encoded) inside your .cropme element.