Jcrop saves previous image

Question

I have a preview that I am cropping, and a thumbnail that displays the part being cropped. Whenever I choose an new image, the preview does not get updated, instead it keeps the image being used previously. However, the thumbnail does get updated, since it shows the new image. Here is my code...

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 is the thumbnail and previewSub is the JCrop image I am trying to update. For some reason the following code is not updating it:

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

Here is the rest of my code for 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'
});
}

Can someone explain to me what I need to do to update previewSub?

Answer 1

You can reload the jcrop component like this

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: If you're using the latest version of jcrop you should set the api as such:

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