DropzoneJs：使用 CropperJS 裁剪图像后创建缩略图

Question

我正在使用 Cropper 3.1.3 and DropzoneJS 5.2.0，两个流行的 JavaScript 库分别裁剪图像和 drop/upload 图像。

我将省略 UI 周围的许多代码。在某个时刻，我 select 裁剪区域并按下 "crop" 按钮。按钮执行：

$image.cropper(
               'getCroppedCanvas', 
               {fillColor: '#fff'}
              )
              .toBlob(function (blob) {
                        var croppedFile = blob; 
                        croppedFile.lastModifiedDate = new Date();
                        croppedFile.name = fileName;
                        croppedFile.accepted = true;
                        var files = myDropzone.getAcceptedFiles();
                        for (var i = 0; i < files.length; i++) {
                            var file = files[i];
                            if (file.name === fileName) {
                                myDropzone.removeFile(file);
                            }
                        }

                        myDropzone.files.push(croppedFile);
                        myDropzone.emit('addedfile', croppedFile);
                        $cropperModal.modal('hide');
                    });

据此，我希望将 blob（文件）发送到拖放区并添加，最后创建缩略图。但这不会发生。那么，如何使用 DropzoneJS 强制创建缩略图？

我有完整的 JSFiddle here 可以重现问题。

Answer 1

您使用的 DropZone 版本可能有问题https://gitlab.com/meno/dropzone/issues/56

您可以通过修改 addedfile 的事件处理程序来为预览生成 objectURL 来解决此问题：

myDropzone.on('addedfile', function(file) {
  if (!cropped) {
    myDropzone.removeFile(file);
    cropper(file);
  } else {
    cropped = false;
    var previewURL = URL.createObjectURL(file);
    var dzPreview = $(file.previewElement).find('img');
    dzPreview.attr("src", previewURL);
  }
});

已更新 JSFiddle：https://jsfiddle.net/m02t97fa/

DropzoneJs：使用 CropperJS 裁剪图像后创建缩略图

DropzoneJs: create a thumbnail after cropping image with CropperJS

javascript

dropzone.js

cropper