DropzoneJs : CropperJS로 이미지 자르기 후 미리보기 이미지를 작성하십시오.

Question

저는 이미지를 자르고 이미지를 놓기/업로드하기위한 두 가지 유명한 JavaScript 라이브러리 인 Cropper 3.1.3 및 DropzoneJS 5.2.0을 사용하고 있습니다.

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

, 나는 블롭 (파일)이 DROPZONE로 전송 추가하고 마지막에 썸네일이 생성되는 것을 기대했다. 그러나 이것은 일어나지 않습니다. 그래서 DropzoneJS를 사용하여 미리보기 이미지를 만들 수 있습니까?

이 문제를 재현하기 위해 전체 JSFiddle here이 있습니다.

Answer 1

당신이 사용하고있는 DROPZONE의 버전에 문제가있을 수 있습니다 https://gitlab.com/meno/dropzone/issues/56

당신은 미리보기에 대한 objectURL 생성 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); 
    } 
}); 

을 업데이트 된 JSFiddle : https://jsfiddle.net/m02t97fa/