如何在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(); 
});