javascriptjqueryhtmlcroppercropperjs

fengyuanchen Cropper: How to get x1, y1, x2, y2 coordinates of the cropped image


I went through the documentation available at https://github.com/fengyuanchen/cropperjs, but couldn't find any information there. I also tried using libraries like, imgAreaSelect which does provide coordinates information in x1, y1, x2, y2 format.

var image = document.getElementById('originaImage');
var cropper = new Cropper(image, {
                              aspectRatio: 16 / 9,
                              viewMode: 3,
                              zoomable: false,
                              minCropBoxWidth: 300,
                              minCropBoxHeight: 300,
                              preview: '.previewimg',
                              movable: false,
                              zoomable: false,
                              rotatable: false,
                              scalable: true,
                              cropend: function (e) {
                                          /* body... */
                              },
                              crop: function(e) {
                                    console.log(e.detail.x);
                                    console.log(e.detail.y);
                                    console.log(e.detail.width);
                                    console.log(e.detail.height);
                                    console.log(e.detail.rotate);
                                    console.log(e.detail.scaleX);
                                    console.log(e.detail.scaleY);
                               }
         }); 
$('#originaImage').cropper('getData', true) // only has x and y coordinates. 

Solution

  • Like imgAreaSelect and JCrop we can achieve the same in CropperJs by doing:

    X2= (Math.round(data.x) + Math.round(data.width));
    Y2= (Math.round(data.y) + Math.round(data.height));
    

    If you don't want to explicitly round off using Math.round(), then you can use getData([rounded])

    getData([rounded])-implicitly rounds off the values.

    I will encourage you to go through the documentation available at https://github.com/fengyuanchen/cropper