Press "Enter" to skip to content

[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.

jquery image cropper with upload, jquery image cropping and resizing, image upload with preview and crop jquery, upload and crop image jquery, crop image using jquery, jquery crop and resize image before upload

Feature Overview

  • Attaches to any div element
  • Automatically detects 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)

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.

$('.cropme').simpleCropper();

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


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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.