Wie bekomme ich die CropperJS-Koordinate für Cropped Image?

Question

Ich verwende cropper JS, um mein Bild zu beschneiden. Ich bin in der Lage, Breite und Höhe meiner Leinwand zu erhalten, muss jedoch die Koordinaten (X und Y) des zugeschnittenen Bildes kennen.

Hier ist mein Code-

(function() { 


    //getting ratio 
    function getImageRatio(sourceCanvas) { 
    var canvas = document.createElement('canvas'); 
    var context = canvas.getContext('2d'); 
    var width = sourceCanvas.width; 
    var height = sourceCanvas.height; 



    canvas.width = width; 
    canvas.height = height; 


    context.beginPath(); 
    context.arc(width/2, height/2, Math.min(width, height)/2, 0, 2 * Math.PI); 
    context.strokeStyle = 'rgba(0,0,0,0)'; 
    context.stroke(); 
    context.clip(); 
    context.drawImage(sourceCanvas, 0, 0, width, height); 

    return canvas; 
    } 




    window.addEventListener('DOMContentLoaded', function() { 
    var image = document.getElementById('image'); 
    var button = document.getElementById('button'); 
    var result = document.getElementById('result'); 
    var croppable = false; 
    var cropper = new Cropper(image, { 
     aspectRatio: 1, 
     viewMode: 1, 
     built: function() { 
     croppable = true; 
     } 
    }); 

    button.onclick = function() { 
     var croppedCanvas; 
     var roundedCanvas; 
     var roundedImage; 

     if (!croppable) { 
     return; 
     } 

     // Crop 
     croppedCanvas = cropper.getCroppedCanvas(); 


     console.log(getImageRatio(croppedCanvas)); 

    }; 

    }); 

})(); 

Jede Idee, wie die ausgeschnittenen Bild bekommen zu koordinieren, so dass ich dieses Bild von PHP zuschneiden kann.

Answer 1

Also, wenn ich richtig verstehe, suchen Sie nach dem methodgetData.

Es diese Eigenschaften zurückkehren, wie die Dokumentation sagt:

x: the offset left of the cropped area 
y: the offset top of the cropped area 
width: the width of the cropped area 
height: the height of the cropped area 
rotate: the rotated degrees of the image 
scaleX: the scaling factor to apply on the abscissa of the image 
scaleY: the scaling factor to apply on the ordinate of the image 

Obwohl, schlage ich vor, auf diesem Abschnitt des Dokuments, einen Blick: https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions

Speziell in diesem Teil:

Danach können Sie den Canvas als Bild direkt anzeigen, oder HTMLCanvasElement.toDataURL verwenden, um eine Daten-URL abzurufen, oder HTMLCanvasElement.toBlob verwenden, um ab zu erhalten lob und laden Sie es mit FormData auf den Server hoch, wenn der Browser diese APIs unterstützt.

Wenn Sie nicht die toBlob Methode verwenden können, weil einige Browser Begrenzung (Sie polyfill immer hinzufügen können), können Sie das Bild bekommen toDataUrl über die Leinwand (IE9 +) verwendet wird. Und senden Sie es an den Back-End-Service bereits beschnitten. Dazu Sie gehen zu müssen, um so etwas zu tun:

var formData = new FormData(); 
formData.append('image', canvas.toDataURL()); 

Sie können die Unterstützung Formdata Browser überprüfen in caniuse

Hoffe, dass Sie es nützlich finden!