时间戳

首页 > 解决方案 > CropperJS getCroppedCanvas() 在第二次初始化时返回 null

javascript - CropperJS getCroppedCanvas() 在第二次初始化时返回 null

问题描述

该方法在就绪事件中被调用。在第一次通话时它工作。当模态关闭时，我正在破坏裁剪器 - cropper.destroy()。第二次打开modal后，cropper再次初始化，但这次cropper.getCroppedCanvas()返回null

let cropper = new Cropper(image, {
                dragMode: 'move',
                aspectRatio: ratio,
                restore: false,
                guides: false,
                center: false,
                highlight: false,
                cropBoxMovable: false,
                cropBoxResizable: false,
                toggleDragModeOnDblclick: false,
                ready: function () {

                    modal.find(".save").on("click", function () {
                        console.log(cropper.getCroppedCanvas())
                        cropper.getCroppedCanvas().toBlob(function (blob) {
                            let formData = new FormData()
                            formData.append("croppedImage", blob)

                            jQuery.ajax({
                                method: "post",
                                url: "index.php?option=com_image_slideshows&task=slideshow.saveCroppedImage",
                                data: formData,
                                processData: false,
                                contentType: false
                            })
                            .done(function (response) {
                                modal.modal("hide")
                            })
                        })
                    })

                    cropper.crop()
                }
            })

在模态关闭时会发生这种情况：

modal.on("hidden.bs.modal", function () {
                cropper.destroy()
                jQuery("#cropper-modal .modal-body").html(
                    jQuery("<img>", {
                        id: "image",
                        "class": "cropper-hidden"
                    })
                )

            })

标签： javascriptjquerycropperjs

解决方案

我的猜测是您最初设置的cropper 变量：

let cropper = new Cropper(...)

仍然在您的 ready 函数中第二次被引用。我会首先尝试确保在调用cropper.destroy() 之后将cropper 变量设置为null。

您还可以通过访问来尝试在您的就绪函数中访问正确的 Cropper 实例this.cropper，例如：

ready: function () {
  modal.find(".save").on("click", function () {
    console.log(this.cropper.getCroppedCanvas());
  }
}

推荐阅读