Touch-compatible jQuery Image Cropping Plugin - PhotoClip

photoClip is an Html5 canvas based jQuery image cropping plugin that allows to zoom, rotate and crop your image with support for touch gestures.

Features:

• Pinch/spread/mousewheel to zoom the image.
• Rotate/doubleClick to rotate the image.

How to use it:

1. Create a clip area to crop the image.

<div id="clipArea"></div>

2. Create a container to display the cropped image.

<div id="view"></div>

3. Create a file input to accept the image.

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

4. Create a button to crop the image.

<button id="clipBtn">Crop</button>

5. Load jQuery library and other required resources at the bottom of the web page.

<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/iscroll-zoom.js"></script>
<script src="js/hammer.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.js"></script>

6. Enable the plugin.

var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260],
    outputSize: [640, 640],
    file: "#file",
    source: "img/mm.jpg",
    view: "#view",
    ok: "#clipBtn",
    loadStart: function() {
      console.log("Loading");
    },
    loadComplete: function() {
      console.log("Complete");
    },
    clipFinish: function(dataURL) {
      console.log(dataURL);
    },
    loadError: function() {},
    lrzOption: {}
});

Change log:

v1.10.1 (2016-08-13)

• update

v1.7.0 (2016-03-25)

• adjusts options.

---

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