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.
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