크기를 조정하여 Jcrop을 사용하여 큰 이미지를 자르는 방법은 무엇입니까?

Question

높이 및 너비 특성을 사용자 지정하여 Jcrop을 사용하여 큰 이미지를 잘라내려고합니다. Jcrop에서 많은 옵션을 시도했지만 아무것도 작동하지 않습니다. 여기 내 코드입니다 :

HTML :

<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" /> 
<br /> 
<br /> 
<table border="0" cellpadding="0" cellspacing="5"> 
    <tr> 
     <td> 
      <img id="Image1" src="" alt="" style="display: none; height:600px; width:600px;" /> 
     </td> 
     <td> 
      <canvas id="canvas" height="5" width="5"></canvas> 
     </td> 
    </tr> 
</table> 
<br /> 
<input type="button" id="btnCrop" value="Crop" style="display: none" /> 
<input type="hidden" name="imgX1" id="imgX1" /> 
<input type="hidden" name="imgY1" id="imgY1" /> 
<input type="hidden" name="imgWidth" id="imgWidth" /> 
<input type="hidden" name="imgHeight" id="imgHeight" /> 
<input type="hidden" name="imgCropped" id="imgCropped" /> 

JQuery와 :

$(document).delegate('#cover-image','change', function(e){ 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#Image1').show(); 
      $('#Image1').attr("src", e.target.result); 
      $('#Image1').Jcrop({ 
       setSelect: [ 0,0,600,180 ], 
       aspectRatio: 10/3, 
       boxWidth: 600, 
       boxHeight: 600, 
       trueSize: [600, 600], 
       onChange: SetCoordinates, 
       onSelect: SetCoordinates 
      }); 
     } 

     reader.readAsDataURL($(this)[0].files[0]);  
    }); 

    $('#btnCrop').click(function() { 
     var x1 = $('#imgX1').val(); 
     var y1 = $('#imgY1').val(); 
     var width = $('#imgWidth').val(); 
     var height = $('#imgHeight').val(); 
     var canvas = $("#canvas")[0]; 
     var context = canvas.getContext('2d'); 
     var img = new Image(); 
     img.onload = function() { 
      canvas.height = 180; 
      canvas.width = 600; 
      context.drawImage(img, x1, y1, width, height, 0, 0, canvas.width, canvas.height); 
      $('#imgCropped').val(canvas.toDataURL()); 
      $('#btnCrop').hide(); 
     }; 
     img.src = $('#Image1').attr("src"); 
    }); 
}); 

function SetCoordinates(c) { 
    $('#imgX1').val(c.x); 
    $('#imgY1').val(c.y); 
    $('#imgWidth').val(c.w); 
    $('#imgHeight').val(c.h); 
    $('#btnCrop').show(); 
    $('#save-cropped-image, #delete-image').hide(); 
}; 

나는 이미지보다 짧은 사업부에서 큰 이미지에 맞게 자르기 위해 노력하고 있어요, 그래서 이미지가 압축 얻을 그 안에. 그러나이 이미지를 자르면 올바른 좌표와 올바른 이미지가 캔버스에 나타나지 않습니다.

나는 4 시간 이상 걸리지 않았습니다. 아무 도움이 주어질 것입니다. 감사합니다.

Answer 1

이 코드를 사용하십시오. 이미지의 원래 크기를 가져 와서 자릅니다.

$(document).delegate('#cover-image','change', function(e){ 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       $('#Image1').attr("src", e.target.result); 
       var $img = $("#Image1"); 
       $img.hide().removeClass("image12"); 
       var w = $img.width(); 
       var h = $img.height(); 
       $('#Image1').Jcrop({ 
        trueSize: [w, h], 
        onChange: SetCoordinates, 
        onSelect: SetCoordinates 
       }); 
      } 

      reader.readAsDataURL($(this)[0].files[0]);  
     }); 

<style type="text/css"> 
.image12{ 
    height:600px; 
    width:600px; 
} 
</style> 

<img id="Image1" class="image12" src="" alt="" style="display: none; " />