Friday, June 28, 2019

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);

No comments:

Post a Comment