Touch-enabled Image Cropping Plugin with jQuery and Canvas - canvasCrop

canvasCrop is an AMD compatible, touch-enabled and canvas based jQuery image cropping plugin which allows you to resize, rotate, and crop a local image in a rectangular crop area.

How to use it:

1. Create the html for a image crop area.

<div class="imageBox" >
  <div class="mask"></div>
  <div class="thumbBox"></div>
  <div class="spinner" style="display: none">Loading...</div>
</div>

2. Add image crop tools.

<div class="tools clearfix">
  <span id="rotateLeft">rotateLeft</span>
  <span id="rotateRight">rotateRight</span>
  <span id="zoomIn">zoomIn</span>
  <span id="zoomOut">zoomOut</span>
  <span id="crop">Crop</span>
  <span id="alertInfo">Alert</span>
  <div class="upload-wapper">
    Select An Image
    <input type="file" id="upload-file" value="Upload">
  </div>
</div>

3. Create an element to place the cropped image.

<div class="cropped" >
  ...
</div>

4. Include jQuery library and the jQuery canvasCrop plugin's JS and CSS files on the web page.

<link rel="stylesheet" href="css/canvasCrop.css">
<script src="jquery.min.js"></script> 
<script src="js/jquery.canvasCrop.js"></script>

5. Initialize the plugin.

$.CanvasCrop({

  // outercontainer
  cropBox : ".imageBox",

  // inner container
  thumbBox : ".thumbBox"

  // initial image
  imgSrc : "demo.jpg",

  // 0 = original size
  // 1 = resize image based on outer container
  // 2 = resize image based on inner container
  limitOver : 2
  
});

6. Public methods.

// rotate an image
CanvasCrop.rotate(90)

// scale an image
CanvasCrop.scale(ratio);

// get the source of the cropped image
var src = CanvasCrop.getDataURL("jpeg");
    $(".cropped").append("<img src='"+src+"' />");

---

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