Jcrop сохраняет предыдущее изображение

Question

У меня есть предварительный просмотр, который я обрезаю, и миниатюра, отображающая обрезаемую часть. Всякий раз, когда я выбираю новое изображение, предварительный просмотр не обновляется, вместо этого он сохраняет изображение ранее. Тем не менее, миниатюра обновляется, так как она показывает новое изображение. Вот мой код ...

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

     reader.onload = function (e) { 
      $('#previewSub2').attr('src', e.target.result); 
      $('#previewSub').attr('src', e.target.result); 
      ... 
      var imgwidth = $("#previewSub2").width(); 
      var imgheight = $("#previewSub2").height(); 
      $("#previewSub").Jcrop({ 
       onChange: showPreview, 
       onSelect: showPreview, 
       aspectRatio: 1,   
       setSelect: [0,imgwidth,0,0], 
       minSize: [90,90], 
       addClass: 'jcrop-light' 
      }); 
      ... 

previewSub2 является миниатюрой и previewSub является JCrop изображения, которое я пытаюсь обновить. По какой-то причине, следующий код не обновляя его:

$('#previewSub').attr('src', e.target.result); 

Вот остальная часть моего кода для showPreview:

function showPreview(coords) 
{ 
var imgSize = $("#previewSub").height(); 
var imgWidth = $("#previewSub").width(); 

var rx = 150/coords.w; 
var ry = 150/coords.h; 

$('#x').val(); 
$('#y').val(); 
$('#w').val(); 
$('#h').val(); 

$('#previewSub2').css({ 
    width: Math.round(rx * imgWidth) + 'px', 
    height: Math.round(ry * imgSize) + 'px', 
    marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
    marginTop: '-' + Math.round(ry * coords.y) + 'px' 
}); 
} 

Может кто-нибудь объяснить мне, что мне нужно сделать, чтобы обновить previewSub?

Answer 1

Вы можете перезагрузить компонент jcrop как этот

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

    reader.onload = function (e) { 
     if(jcrop_api) { 
      jcrop_api.destroy(); 
     } 

     $('#previewSub2').attr('src', e.target.result); 
     $('#previewSub').attr('src', e.target.result); 
     ... 
     var imgwidth = $("#previewSub2").width(); 
     var imgheight = $("#previewSub2").height(); 

     jcrop_api = $("#previewSub").Jcrop({ 
      onChange: showPreview, 
      onSelect: showPreview, 
      aspectRatio: 1,   
      setSelect: [0,imgwidth,0,0], 
      minSize: [90,90], 
      addClass: 'jcrop-light' 
     }); 

UPDATE: Если вы используете последнюю версию jcrop вы должны установить апи как таковой:

$("#previewSub").Jcrop({ 
    onChange: showPreview, 
    onSelect: showPreview, 
    aspectRatio: 1,   
    setSelect: [0,imgwidth,0,0], 
    minSize: [90,90], 
    addClass: 'jcrop-light' 
    }, function() { 
     jcrop_api = this; 
});