[jQuery] Add Image Cropper With Upload to Your Web Application

Simple Cropper is a jQuery plugin that gives you the ability to add cropping functionality to your web application. Canvas uses html5 to create cropped images and css3, so it only works on the latest browsers.

Feature Overview

  • Attaches to any div element
  • Automatically detects the aspect ratio of an element
  • Creates new cropped(base64 encoded) image and inserts it into element
  • Cropped images are generated client-side
  • Support for CSS styling

Tested on

  • Firefox 26.0
  • Opera 12.16
  • Google Chrome 31.0.1650.63
  • Internet Explorer 10+ (still problems with CSS)

Check Here – (base64) Pure JavaScript Image Cropping Functionality To Your Web | js-cropper

How to make use of it:

1. Load the mandatory jQuery library and Jcrop plugin within the doc.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!--JCrop plugin -->
<link rel="stylesheet" href="/path/to/jcrop/jquery.Jcrop.min.css" />
<script src="/path/to/jcrop/jquery.Jcrop.min.js"></script>

2. Load the Simple Image Cropper’s JavaScript and CSS within the doc.

<link rel="stylesheet" href="css/style.css" />
<script src="scripts/jquery.SimpleCropper.js"></script>

3. Create an empty container to carry the image cropper.

<div class="cropme"></div>

4. Initialize the image cropper by calling the function simpleCropper on the container component, you simply created.


Simple Image Cropper In jQuery, Simple Cropper Plugin/Github, jquery crop image before upload, jquery cropper


An Image Cropper for Angular Component Library
Vue.js Image Clipping Components Using Vue-Rx | vuejs-clipper

See Demo And Download

Official Website(hane-smitter): Click Here

This superior jQuery/javascript plugin is developed by hane-smitter. For extra advanced usage, please go to the official website.