fengyuanchen Cropper：如何獲得裁剪圖像的x1，y1，x2，y2座標

Question

我查看了https://github.com/fengyuanchen/cropperjs的文檔，但在那裏找不到任何信息。我也嘗試使用庫，如imgAreaSelect，它提供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

像imgAreaSelect和JCrop我們可以通過執行實現CropperJs相同：

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

如果你不希望明確四捨五入使用Math.round()，那麼你可以使用getData([rounded])

getData([rounded]) - 明確舍入值。

我會鼓勵您閱讀文檔https://github.com/fengyuanchen/cropper