DropzoneJs:使用CropperJS

时间:2017-11-06 22:18:21

标签: javascript dropzone.js cropper

我使用Cropper 3.1.3和DropzoneJS 5.2.0,两个流行的JavaScript库分别裁剪图像和删除/上传图片。

我将省略围绕UI的许多代码。在某一点上,我选择一个裁剪区域,然后按下" 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(文件)将被发送到dropzone并添加,最后创建缩略图。但这不会发生。 那么,如何使用DropzoneJS强制创建缩略图?

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

1 个答案:

答案 0 :(得分:2)

使用https://gitlab.com/meno/dropzone/issues/56

的DropZone版本可能存在问题

您可以修改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/