如何通过CropperJS获得裁剪图像的坐标？

我使用cropper JS裁剪我的图像。我能够获得画布的宽度和高度，但是，需要知道裁剪图像的坐标（X和Y）。如何通过CropperJS获得裁剪图像的坐标？

这里是我的代码 -

(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裁剪这张图片。

来源

2016-07-26 tisuchi

我不知道为什么有些人总是有负面的头脑！这里放弃投票的原因是什么？ – tisuchi

因此，如果我理解正确，您正在寻找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方法，因为一些浏览器限制（你可以随时添加填充工具），你可以使用toDataUrl在画布（IE9 +）的图像。并将其发送至已裁剪的后端服务。对于这一点，你将需要做这样的事情：

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

可以在caniuse

希望你觉得它有用的检查FORMDATA浏览器的支持！

来源

2016-08-17 05:44:31

如何通过CropperJS获得裁剪图像的坐标？

回答

相关问题