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

getData([rounded])隱式getData([rounded])值。

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