次のコードがあります。
<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>
問題は、新しいファイルを選択すると、新しい画像が表示されないことです (古い画像はクロッパーに表示されたままです)。
ご覧のとおり、古い URL を確認し、これを取り消します。startCropper() 関数で $("#crop").cropper({...}) を使用しない場合、機能します。
GitHub: https://github.com/fengyuanchen/cropper/tree/v2.3.0
クロッパーに新しい画像を読み込ませるにはどうすればよいですか?