当模式关闭或隐藏时，CropperJs破坏了上一张图像，不适用于Bootstrap

问题描述

我正在尝试使用cropperjs在我的网站上上传图像，到目前为止，我已经显示了模态，并且裁剪区域也表现得很好，但是，当我关闭模态并选择一个新图像时，新图像得到了附加到上一张图片。到目前为止，我有：

$(document).ready(function () {

var cropper;

$(document).on('shown.bs.modal','#uploadimageModal',function () {
    cropper.destroy();
    console.log('cropper destroyed');
})

$(document).on('hidden.bs.modal',function () {
    cropper.destroy();
    console.log('cropper destroyed');
})

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#id_image_preview').attr('src',e.target.result);
            initCropper();
        };
        reader.readAsDataURL(input.files[0]);
        setTimeout(initCropper,1000);
    }
}

function initCropper() {
    $('#uploadimageModal').modal('show');
    var image = document.getElementById('id_image_preview');
    cropper = new Cropper(image,{
        aspectRatio: 1 / 1,responsive: true,crop: function (e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
        }
    });

    document.getElementById('crop_img_usr_btn').addEventListener('click',function () {
        var imgurl = cropper.getCroppedCanvas().toDataURL();
        cropper.getCroppedCanvas().toBlob(function (blob) {
            var formData = new FormData();
            formData.append('cropped_image ',blob);
            $.ajax({
                url: '/update_image/',type: 'POST',data: formData,cache: false,async: true,processData: false,contentType: false,timeout: 5000,success: function (data) {
                    location.href = data.new_url
                },});
        });
        $('#uploadimageModal').modal('hide');
        cropper.destroy();
    })


 }
})

我添加的任何方法都没有销毁裁剪器对象。模态关闭甚至提交后，我如何才能每次移除收割机？

编辑

我已在$(document).ready(function(){})函数中添加了模式事件侦听器，但它仍无法正常工作。

这是我如何在HTML中实例化模式元素和裁剪器元素的方法：

<input type="file" name="image" accept="image/*" id="id_image" onchange='readURL(this);'>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cropperjs javascript jquery