Jquery Crop: cropper image not changing

Question

I have the following code:

<link rel="stylesheet" href="style.css">
<script src="/static/js/jquery/2.1.4/jquery.min.js"></script>
<script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script>
<form  action="" method="post" enctype="multipart/form-data">
<img id="crop" style="width:400px;height:200px;" />
<div id="img2" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
X: <input type="text" id="crop_x" name="crop_x" /><br />
Y: <input type="text" id="crop_y" name="crop_y" /><br />
Width: <input type="text" id="crop_width" name="crop_width" /><br />
Height: <input type="text" id="crop_height" name="crop_height" /><br />
<input type="file" id="file" name="file" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script>

var url = null;
$('#file').on('change',function(){

    var file = this.files[0];

    if(url != null){

        URL.revokeObjectURL(url);

    }

    url = URL.createObjectURL(file);


    startCropper();

});


function startCropper(){

    $('#crop').removeAttr('src');

    $('#crop').attr('src',url);

    $('#crop').cropper({

    viewMode            : 0,

    cropBoxResizable    : false,

    minCropBoxWidth     : 100,

    minCropBoxHeight    : 100,

    dragMode            : 'none',

    preview             : $('#img2'),

    aspectRatio: 1,

    crop : function(e){

        $('#crop_x').val(e.x);

        $('#crop_y').val(e.y);

    }

 });
};
</script>

The problem is that when I select a new file, the new image is not showed (the old image is still displayed in the cropper).

As you can see, I check the old url and revoke this. When I don't use $("#crop").cropper({...}) in the startCropper() function, it works.

GitHub: https://github.com/fengyuanchen/cropper/tree/v2.3.0

How can I force the cropper to load the new image?

Answer 1

You need to call

$('#crop').cropper('destroy');

before crop initialization