DropzoneJs: Erstellen Sie ein Vorschaubild nach dem Zuschneiden Bild mit CropperJS

Question

Ich verwende Cropper 3.1.3 und DropzoneJS 5.2.0, zwei beliebte JavaScript-Bibliothek zum Zuschneiden von Bildern und Drop/Upload von Bildern.

Ich werde viel Code weglassen, der die Benutzeroberfläche umgibt. An einem bestimmten Punkt wähle ich einen Schnittbereich und drücke einen "Crop" Knopf. Die Taste führt:

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

Daraus ich erwartet, dass der Blob (Datei) an die Dropzone gesendet wird und hinzugefügt und am Ende das Miniaturbild erstellt wird. Aber das passiert nicht. Also, wie kann ich die Erstellung der Miniaturansicht mit DropzoneJS erzwingen?

Ich habe eine komplette JSFiddle here, um das Problem zu reproduzieren.

Answer 1

Es kann ein Problem mit der Version von Dropzone sein Sie verwenden https://gitlab.com/meno/dropzone/issues/56

Sie können für addedfile durch Modifizieren der Event-Handler um ihn herum arbeiten, um eine objectURL für die Vorschau zu generieren:

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/