Dropzone.js + 裁剪图像

如何解决Dropzone.js + 裁剪图像

根据示例，我拼凑了一个工作脚本，用于在将图像放到 dropzone.js dropzone 上时启动cropper.js。

唯一的问题是裁剪图像的文件大小没有反映在 dropzone 文件大小元素中，而是仍然显示最初删除的文件的文件大小。

我被难住了....

（注意：blob.size 显示正确的文件大小）

    (function ($) {

    $(document).on('wsf-rendered',function (e,form,form_id,instance_id) {

        // Access dropzone from raw HTML element
        rawElement = document.querySelector("div#wsf-1-field-1-dropzone");
        var myDropzone = rawElement.dropzone;

        myDropzone.options.transformFile = function (file,done) {
            // Create Dropzone reference for use in confirm button click handler
            var myDropZone = this;
            // Create the image editor overlay
            var editor = document.createElement('div');
            editor.style.position = 'fixed';
            editor.style.left = 0;
            editor.style.right = 0;
            editor.style.top = 0;
            editor.style.bottom = 0;
            editor.style.zIndex = 9999;
            editor.style.backgroundColor = '#000';
            document.body.appendChild(editor);
            // Create confirm button at the top left of the viewport
            var buttonConfirm = document.createElement('button');
            buttonConfirm.style.position = 'absolute';
            buttonConfirm.style.left = '10px';
            buttonConfirm.style.top = '10px';
            buttonConfirm.style.zIndex = 9999;
            buttonConfirm.textContent = 'Confirm';
            editor.appendChild(buttonConfirm);
            buttonConfirm.addEventListener('click',function () {
                // Get the canvas with image data from Cropper.js
                var canvas = cropper.getCroppedCanvas({
                    width: 256,height: 256
                });
                // Turn the canvas into a Blob (file object without a name)
                canvas.toBlob(function (blob) {
                    // Create a new Dropzone file thumbnail
                    myDropZone.createThumbnail(
                        blob,myDropZone.options.thumbnailWidth,myDropZone.options.thumbnailHeight,myDropZone.options.thumbnailMethod,false,function (dataURL) {

                            // Update the Dropzone file thumbnail
                            myDropZone.emit('thumbnail',file,dataURL);
                            // Return the file to Dropzone
                            done(blob);
                        });
                });
                // Remove the editor from the view
                document.body.removeChild(editor);
            });
            // Create an image node for Cropper.js
            var image = new Image();
            image.src = URL.createObjectURL(file);
            editor.appendChild(image);

            // Create Cropper.js
            var cropper = new Cropper(image,{
                aspectRatio: 1
            });
        };

    });

})(jQuery);