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="//code.jquery.com/jquery-3.1.1.min.js"></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:

$("#file").change(function(e){
  
  var img = e.target.files[0];

  if(!img.type.match('image.*')){
    alert("Whoops! That is not an image.");
    return;
  }
  iEdit.open(img, true, function(res){
    $("#result").attr("src", res);
  });
  
});

Change log:

2017-04-08

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