我正在使用Cropper 3.1.3 和DropzoneJS 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 强制创建缩略图?
我在这里有一个完整的 JSFiddle来重现该问题。