Touch-compatible jQuery Image Cropping Plugin - PhotoClip
File Size: | 418 KB |
---|---|
Views Total: | 6290 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.