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

我使用3.1.3和5.2.0，这两个流行的JavaScript库分别裁剪图像和拖放/上传图像

我将省略许多围绕UI的代码。在某一点上，我选择一个裁剪区域并按下裁剪按钮。该按钮执行以下操作：

$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文件被发送到dropzone并添加，最后创建缩略图。但事实并非如此。 那么，如何使用DropzoneJS强制创建缩略图呢

---

我有一个完整的JSFIDLE来重现这个问题。

您使用的DropZone版本可能有问题

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

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);
  }
});

---

更新的JSFIDLE:

为了完整起见，我应该补充我的代码片段只起作用，因为在$image.crapper'getCroppedCanvas'中，{…it has crapped=true，然后通过myDropzone将图像的裁剪版本添加到DropZone中。发出'addedfile'，crappedFile；。这将使用裁剪版本重新触发addedfile事件处理程序您好，谢谢您的回答。因此，只需按照您的建议更改该版本，似乎就解决了此问题。非常感谢。我将进行更多测试，并n凯斯，赏金。