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로 서버에 업로드하십시오.

일부 브라우저의 제한 (당신은 항상 polyfill을 추가 할 수 있습니다), 캔버스 (IE9 +)를 통해 toDataUrl를 사용하여 이미지를 얻을 수 있기 때문에 당신이 toBlob 방법을 사용할 수없는 경우. 이미 자른 백엔드 서비스로 보내주십시오. 이를 위해이 같은 일을해야 할 것 같습니다

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

당신은

당신이 도움이 희망 caniuse

에 formData 브라우저 지원을 확인하실 수 있습니다!

출처

2016-08-17 05:44:31

CropperJS의 자른 이미지 좌표를 얻는 방법은 무엇입니까?

답변

관련 문제