So erhalten Sie die ursprüngliche Höhe und Breite eines Bildes nach dem Einstellen der benutzerdefinierten Höhe und Breite in JCrop

Question

Ich versuche, ein Bild mit Jcrop-Plugin zuzuschneiden. Das hochgeladene Bild ist größer als die gewünschten Dimensionen (600X600).

Was ich mache, ist anfänglich die Einstellung der Bildmaße auf 600X600, um es dem Benutzer anzuzeigen und dann seine Abmessungen auf die ursprüngliche Höhe und Breite zu setzen. und danach setzen Sie die ursprüngliche Höhe und Breite in die "trueSize" -Option von JCROP, um das korrekte Zuschneiden zu erhalten.

Das Problem ist, dass ich beim ersten Mal nicht die korrekte Höhe und Breite des hochgeladenen Bildes erhalte. aber wenn ich es erneut hochlade, ohne den Cache zu leeren, funktioniert es gut. Ich möchte die ursprüngliche Größe des Bildes beim ersten Mal erhalten. Hier ist mein Code:

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; 
} 

Bitte antworten Sie schnell, wenn jemand die Antwort kennt. Vielen Dank!

Answer 1

Verwenden dieser Code in 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(); 
});