fengyuanchen Cropper: Comment obtenir les coordonnées x1, y1, x2, y2 de l'image recadrée

Question

J'ai parcouru la documentation disponible au https://github.com/fengyuanchen/cropperjs, mais je n'y ai trouvé aucune information. J'ai également essayé d'utiliser des bibliothèques comme, imgAreaSelect qui fournit des informations de coordonnées au format x1, y1, x2, y2.

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. 

Answer 1

Comme imgAreaSelect et JCrop nous pouvons obtenir le même dans CropperJs en faisant:

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

Si vous ne voulez pas arrondir explicitement hors Math.round() à l'aide, vous pouvez utiliser getData([rounded])

getData([rounded]) - arrondit automatiquement les valeurs. Je vais vous encourager à parcourir la documentation disponible au https://github.com/fengyuanchen/cropper