Javascript Cropper를 사용하여 서버에 게시 된 이미지 크기를 고정하는 방법

Question

콘텐츠 관리 시스템에서 Cropper https://github.com/fengyuanchen/cropper을 사용하고 있지만 자른 이미지의 크기를 고정하기 위해 고심하고 있습니다.

캔버스에 그려지는 자르기 상자의 크기가 정확히 560x420px의 자른 이미지 크기가 웹 서버로 전달되도록하려는 것입니다.

내가 지금 가지고있는 IQUERY 코드는 다음과 같습니다 -

$("#accept_crop").click(function() { 

     var $image = $("#image"); 
     var cropper = $image.cropper(); 
     var baseURL = window.location.protocol+'//'+window.location.host; 
     var pho_id = $("input[name=pho_id]").val(); 
     var mem_id = $("input[name=mem_id]").val(); 
     var photopath = $("input[name=photopath]").val(); 
     $image.cropper('getCroppedCanvas').toBlob(function (blob) { 
       var formData = new FormData(); 
       formData.append('croppedImage', blob); 
       formData.append('pho_id', pho_id); 
       formData.append('mem_id', mem_id); 
       formData.append('photopath', photopath); 
       $.ajax(baseURL+'/path', { 
        method: "POST", 
        data: formData, 
        processData: false, 
        contentType: false, 
        success: function() { 
         console.log('Upload success'); 
        }, 
        error: function() { 
         console.log('Upload error'); 
        } 
       }); 
     }, 'image/jpeg', 0.8);  

}); 

자른 이미지가 잘 통해 전달되지만 항상 그려 자르기 상자의 크기에 따라 가변 크기가 발생합니다. 자르기 상자에 관계없이 클라이언트 사이트의 크기를 고정시키는 방법이 있습니까? PHP를 사용하지 않고 이미지의 크기를 위 또는 아래로 조정할 수 있습니까?

Answer 1

이것은 언제나 일어나는 것처럼 보입니다 ... 질문을 올리 자마자 나는 그 질문에 답하기 위해 이미 많은 시간을 보냈음에도 불구하고 곧 답장을합니다. 너비와 높이 옵션을 추가 추가함으로써

, 이것은 작동하는 것 같다 : -

이 그것을 할 수

$image.cropper('getCroppedCanvas', {'width': 560, 'height': 420}).toBlob(function (blob) { 

Answer 2

, 그 문서 확인 :

https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions

당신은 대상 폭을 설정할 수 있습니다 및 출력 캔버스의 높이.

다른 것은 필요한 너비와 높이에 따라 비율 배급을 설정해야합니다. 560/420은 4/3에 비례합니다. aspectRatio : 4/3을 설정하십시오. 어떤 것을 손상시키지 않고 원하는 크기로 이미지 크기를 조정합니다.