Minimal Image Cropping Plugin With jQuery And Canvas - iEdit

Minimal Image Cropping Plugin With jQuery And Canvas - iEdit
File Size: 14.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

iEdit is a very small, canvas based jQuery image cropping plugin which allows you to select/crop photos within a draggable area and then output the result as a normal image on the client side.

How to use it:

1. Load the latest version of jQuery library and the jQuery iEdit plugin's JavaScript & Stylesheet in your html page.

<link rel="stylesheet" href="iEdit.css">
<script src="//"></script>
<script src="iEdit.js"></script>

2. Create a file input to select desired image you'd like to crop.

<input id="file" type="file" >

3. Create an empty img tag to display the cropped image.

<img id="result">

4. Enable the image cropping plugin as this:

  var img =[0];

    alert("Whoops! That is not an image.");
  }, true, function(res){
    $("#result").attr("src", res);

Change log:


  • bug fixes in default settings.

This awesome jQuery plugin is developed by rohanOffi. For more Advanced Usages, please check the demo page or visit the official website.