DropzoneJs：CropperJSで画像を切り抜いたあとにサムネイルを作成

Question

私はCropper 3.1.3とDropzoneJS 5.2.0を使用しています.2つの一般的な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'); 
        }); 

を、私はブロブ（ファイル）をドロップゾーンに送信して、コメントを追加し、最後にサムネイルが作成されることを期待しました。しかし、これは起こらない。 DropzoneJSを使用してサムネイルの作成を強制するにはどうすればよいですか？

問題を再現するには、完全なJSFiddle hereがあります。

Answer 1

あなたはあなたがプレビュー用objectURLを生成するaddedfileのイベントハンドラを変更することでそれを回避することができますhttps://gitlab.com/meno/dropzone/issues/56

を使用しているドロップゾーンのバージョンに問題がある可能性があり：

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/