Crop and Resize Images Using (Mouse Or Touch Capable) With This Simple jQuery Plugin

The Cropper plugin requires a copy of jQuery and it comes with two files: a CSS stylesheet and the JavaScript plugin library. Just add these files to your page and it should be good to go!

Download plugin file from here

var options = { aspectRatio: 0, preview: '.img-preview', ready: function (e) { console.log(e.type); }, cropstart: function (e) { console.log(e.type, e.detail.action); }, cropmove: function (e) { console.log(e.type, e.detail.action); }, cropend: function (e) { console.log(e.type, e.detail.action); }, crop: function (e) { var data = e.detail; console.log(e.type); data.x = Math.round(data.x); data.y = Math.round(data.y); data.height = Math.round(data.height); data.width = Math.round(data.width); data.rotate = typeof data.rotate !== 'undefined' ? data.rotate : ''; data.scaleX = typeof data.scaleX !== 'undefined' ? data.scaleX : ''; data.scaleY = typeof data.scaleY !== 'undefined' ? data.scaleY : ''; console.log(data); }, zoom: function (e) { console.log(e.type, e.detail.ratio); } }; var cropper = new Cropper(image, options);