Wie erhalten Sie die Bildkoordinaten eines Bildes vor dem Hochladen?

Question

Ich versuche Jcrop Plugin Arbeit zu erhalten, nachdem Benutzer durch Klicken auf die Schaltfläche Durchsuchen ein Bild auswählt, wir FileReader() mithilfe der Vorschau eines Bildes geladen werden kann, kann ich die Vorschau zeigen, aber wenn ich Jcrop auf change Ereignis am Initialisierung der Durchsuchen-Schaltfläche funktioniert es nicht. Unten ist der Code.

Formular

<form id="form1" runat="server"> 
    <input type='file' id="imageInput" /> 
    <img id="blah" src="#" alt="your image" /> 
</form> 

Javascript

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imageInput").change(function(){ 
    readURL(this); 
    $("#blah").Jcrop(); 
}); 

In den obigen Code Javascript, wenn ich $("#blah").Jcrop(); bin hinzufügen, ist die Vorschau nicht funktioniert und ich bekommen stattdessen eine schwarze Linie. Ich habe eine Fiedel erstellt, um das gleiche zu demonstrieren http://jsfiddle.net/LvsYc/8230/

Bitte helfen Sie!

Answer 1

Versuchen Jcrop Anruf innerhalb FileReader.onload Rückruf wie diese bewegen (ich versuchte, es in Ihrer Geige in FF und es funktioniert gut)

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
      $("#blah").Jcrop(); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imageInput").change(function(){ 
    readURL(this); 
});