Jquery Crop：裁剪器图像没有改变

Question

我有以下代码：

<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>

问题是当我选择一个新文件时，没有显示新图像（旧图像仍然显示在裁剪器中）。

如您所见，我检查了旧网址并撤销了它。当我不在 startCropper() 函数中使用 $("#crop").cropper({...}) 时，它可以工作。

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

如何强制裁剪器加载新​​图像？

Answer 1

你需要打电话

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

作物初始化前