Jcrop에서 사용자 정의 높이와 너비를 설정 한 후 이미지의 원래 높이와 너비를 얻는 방법

Question

Jcrop 플러그인을 사용하여 이미지를 자르려고합니다. 업로드 한 이미지가 원하는 크기 (600X600)보다 큽니다.

내가하고있는 일은 처음에는 이미지 크기를 600X600으로 설정하여 사용자에게 표시 한 다음 크기를 원래의 높이와 너비로 설정합니다. 그 후에 Jcrop의 "trueSize"옵션에 원래의 높이와 너비를 설정하여 올바른 자르기를 얻습니다.

문제는 처음으로 올린 이미지의 원래 높이와 너비가 정확하지 않다는 것입니다. 하지만 캐시를 지우지 않고 다시 업로드하면 제대로 작동합니다. 처음 이미지의 원래 크기를 얻고 싶습니다. 여기 내 코드입니다 :

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;" /> 
     </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){ 
     $('.update-img').hide(); 
     $('#Image1').hide(); 
     $('#loader1').show(); 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#Image1').attr("src", e.target.result); 
      var $img = $("#Image1"); 
      $img.hide().removeClass("image12"); 
      var width = $img.width(); 
      var height = $img.height(); 
      $img.addClass("image12").show(); 

      $('#Image1').Jcrop({ 
       setSelect: [ 0,0,600,180 ], 
       aspectRatio: 10/3, 
       trueSize: [width, height], 
       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(); 
      $('#save-cropped-image, #delete-image, .preview').show(); 
     }; 
     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(); 
}; 

CSS : 사람이 답을 알고 있다면

.image12{ 
    height:600px; 
    width:600px; 
} 

빠른 회신 해 주시기 바랍니다. 감사!

Answer 1

jquery.js이 코드는

$(document).delegate('#cover-image','change', function(e){ 
    $('.update-img').hide(); 
    $('#Image1').hide(); 
    $('#loader1').show(); 
    var reader = new FileReader(); 
    reader.onload = function (e) {  
     var image = new Image(); 
     //Set the Base64 string return from FileReader as source. 
     image.src = e.target.result; 
     $('#Image1').attr("src",image.src); 

     image.onload = function() { 
      var height = this.height; 
      var width = this.width; 
      // alert(height+"and"+width); 
      var jcrop_api = $('#Image1').Jcrop({ 
       trueSize: [width, height], 
       onChange: SetCoordinates, 
       onSelect: SetCoordinates 
      }) 
     } 

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