CropperJSによるクロップ画像の座標の取得方法は？

Question

私は画像を切り抜くのにcropper JSを使用しています。私はキャンバスの幅と高さを得ることができますが、切り取った画像の座標（XとY）を知る必要があります。

は、ここに私のコード -

(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)); 

    }; 

    }); 

})(); 

任意のアイデア、どのように私はPHPでこの画像を切り抜くことができますように、トリミングされた画像の座標を取得することです。

Answer 1

私が正しく理解すれば、methodgetDataを探しています。

ドキュメントが言うようにそれはこれらのプロパティを返します

：

、私はドキュメントのこのセクションでご覧になることを示唆しているが

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 

：

：具体的にこの部分で https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions

その後、キャンバスをイメージとして直接表示するか、HTMLCanvasElement.toDataURLを使用してデータURLを取得するか、HTMLCanvasElement.toBlobを使用してabブラウザがこれらのAPIをサポートしている場合は、FormDataを使用してサーバーにアップロードします。

いくつかのブラウザの制限（あなたは常にポリフィルを追加することができます）ので、あなたがtoBlobメソッドを使用できない場合は、キャンバス（IE9 +）上toDataUrlを使用して画像を得ることができます。すでに切り取ったバックエンドサービスに送信します。このためには、このような何かをする必要があるとしている。

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

あなたはcaniuse

にFORMDATAブラウザのサポートを確認することができますあなたはそれが参考ホープ！