上传到放置区（dropzone.js）的图像是使用cropper.js裁剪的，但发布时不会显示裁剪的图像

Question

我有一个代码，负责在模式窗口中打开加载在拖放字段（dropzone.js）中的图像，以便使用cropper.js进行裁剪。该代码正在运行。模态窗口打开，图像被裁剪，裁剪后的图像显示在拖放字段中。但是发布后，图像不会在帖子中裁剪。即，事实是未裁剪的图像被上载到服务器。这个问题怎么解决？这是代码。

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('div#myDropzone', {
url: "/plugins/dropzone/dist/upload.php",
createImageThumbnails: true,
autoProcessQueue: false,
init: function() {
   this.on("addedfile", function() {
      if (this.files[1]!=null){
      this.removeFile(this.files[0]);}
      });
   },
});

var cropped = false;
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);
    }
});

function cropper(file) {
var c = 0;
var fileName = file.name;
var loadedFilePath = getSrcImageFromBlob(file);

  var modalTemplate =
      '<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">' +
      '<div class="modal-dialog" role="document">' +
      '<div class="modal-content">' +
      '<div class="modal-header">' +
      '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>' +
      '</div>' +
      '<div class="modal-body">' +
      '<div class="cropper-container">' +
      '<img id="img-' + c + '" src="' + loadedFilePath + '" data-vertical-flip="false" data-horizontal-flip="false">' +
      '</div>' +
      '</div>' +
      '<div class="modal-footer">' +
      '<button type="button" class="btns btn-warning rotate-left"><i class="fa fa-rotate-left"></i></button>' +
      '<button type="button" class="btns btn-warning rotate-right"><i class="fa fa-rotate-right"></i></button>' +
      '<button type="button" class="btns btn-warning zoom-in" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>' +
      '<button type="button" class="btns btn-warning zoom-out" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>' +
      '<button type="button" class="btns btn-warning reset"><i class="fa fa-refresh"></i></button>' +
      '<button type="button" class="btns btn-primary crop-upload">Crop and Upload</button>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';

    // @formatter:on

    var $cropperModal = $(modalTemplate);
    var $image = null;

    $cropperModal.modal('show').on("shown.bs.modal", function() {
      $image = $('#img-' + c);
      console.log($image);
      var cropper = $image.cropper({
          autoCropArea: 1,
          aspectRatio: 16 / 12,
          cropBoxResizable: false,
          movable: true,
          rotatable: true,
          zoomable: true,
          toggleDragModeOnDblclick: false,
          viewMode: 2
        });

      $cropperModal.on('click', '.crop-upload', function() {
          // get cropped image data
          $image.cropper('getCroppedCanvas', {
            width: 400,
            height: 300,
            minWidth: 400,
            minHeight: 300,
            maxWidth: 4096,
            maxHeight: 3072,
            fillColor: '#fff',
            imageSmoothingEnabled: false,
            imageSmoothingQuality: 'high'
          })
            .toBlob(function(blob) {
            var croppedFile = blobToFile(blob, 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);
              }
            }
            cropped = true;

            myDropzone.files.push(croppedFile);
            myDropzone.emit('addedfile', croppedFile);
            myDropzone.createThumbnail(croppedFile); //, width, height, resizeMethod, fixOrientation, callback)
            $cropperModal.modal('hide');
          });
        })
        .on('click', '.rotate-right', function() {
          $image.cropper('rotate', 90);
        })
        .on('click', '.rotate-left', function() {
          $image.cropper('rotate', -90);
        })
        .on('click', '.reset', function() {
          $image.cropper('reset');
        })
        .on('click', '.zoom-in', function() {
            $image.cropper('zoom', 0.1);
        })
        .on('click', '.zoom-out', function() {
            $image.cropper('zoom', -0.1);
        })
  }).on('hidden.bs.modal', function() {
    $(this).remove();
    $image.cropper('destroy');
  })
  }

  function getSrcImageFromBlob(blob) {
    var urlCreator = window.URL || window.webkitURL;
    return urlCreator.createObjectURL(blob);
  }

  function blobToFile(theBlob, fileName) {
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
  }

HTML代码：

<form action="<?php echo JRoute::_('index.php'); ?>" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm" class="form-validate">
    <div class="itemAdditionalData_image">
        <div class="content">
            <div class="dropzone dz-clickable" id="myDropzone">
                <div class="dz-default dz-message" id="myAwesomeDropzone">
                    <button class="dz-button" type="button">Upload an image</button>
                </div>
                <input class="inputbox required avatar" type="file" id="image" name="image" hidden />
            </div>
        </div>
    </div>
</form>

代码也发布在这里：https://jsfiddle.net/y8m3nw1o/4/