cropperjs - Cropper JS 在重新上传图像时重复

Question

当我使用cropper js上传新图像时，它会像这样复制cropper：

这是我如何处理整个上传和重新上传的代码：

$(window).ready(function() {
    function cropImage($image, input, trigger, preview, output, options) {
        input.change(function() {
            var oFReader = new FileReader();

            oFReader.readAsDataURL(this.files[0]);

            oFReader.onload = function (oFREvent) {
                let cropper = null;

                // Cropper instance
                cropper = new Cropper(
                    $image[0], 
                    options
                );
                
                // Destroy Cropper Instance
                cropper.destroy();

                $image[0].setAttribute('src', this.result);

                trigger.removeClass('disabled').addClass('active');
                
                // Create New cropper instance after destorying
                cropper = new Cropper(
                    $image[0], 
                    options
                );

                cropperPreview(trigger, $image,preview, cropper, output);
            };
        });
    }

我按照插件创建者的建议使用 replace 方法，但输出相同。

Answer 1

您可能需要研究 destroy() & re-init ..希望它能解决您的问题。