Как получить координаты изображения изображения перед загрузкой?

Question

Я пытаюсь получить Jcrop плагин работы после того, как пользователь выбирает изображение, нажав кнопку обзора, мы можем загрузить предварительный просмотр изображения с помощью FileReader(), я могу показать предварительный просмотр, но когда я инициализирую Jcrop на change событие кнопки обзора, это не сработает. Ниже приведен код.

Форма

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

В приведенном выше коде Javascript, когда я добавляю $("#blah").Jcrop();, предварительный просмотр не работает, и я получаю черный линию вместо этого. Я создал скрипку, чтобы продемонстрировать то же самое http://jsfiddle.net/LvsYc/8230/

Пожалуйста, помогите!

Answer 1

Попробуйте переставить Jcrop вызов внутри FileReader.onload обратного вызова, как это (я пробовал в FF внутри вашей скрипке, и это работает отлично)

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