Javascript 上载到dropzone（dropzone.js）的图像将使用croper.js进行裁剪，但在发布时不会显示裁剪后的图像

我有一个代码，负责在模式窗口中打开加载在拖放字段（dropzone.js）中的图像，以便使用crapper.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;
  }

Dropzone.autoDiscover=false；
var myDropzone=新的Dropzone（'div#myDropzone'{
url:“/plugins/dropzone/dist/upload.php”，
createImageThumbnails:true，
自动处理队列：false，
init:function（）{
this.on（“addedfile”，function（））{
if（this.files[1]！=null）{
this.removeFile（this.files[0]）；}
});
},
});
var cropped=false；
myDropzone.on（'addedfile'，函数（文件）{
如果（！裁剪）{
myDropzone.removeFile（文件）；
裁剪器（文件）；
}否则{
裁剪=假；
var previewURL=URL.createObjectURL（文件）；
var dzPreview=$（file.previewElement）.find（'img'）；
dzPreview.attr（“src”，previewURL）；
}
});
函数裁剪器（文件）{
var c=0；
var fileName=file.name；
var loadedFilePath=getSrcImageFromBlob（文件）；
var modalTemplate=
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“裁剪并上传”+
'' +
'' +
'' +
'';
//@formatter:on
变量$CROPERMODAL=$（modalTemplate）；
var$image=null；
$croperModal.modal（'show'）。on（'show.bs.modal'，function（）{
$image=$（“#img-”+c）；
console.log（$image）；
var crapper=$image.crapper({
自转种植面积：1，
专题：16/12，
CropBoxResizeable:错误，
是的，
可旋转：正确，
可缩放：是的，
toggleDragModeOnDblclick:false，
查看模式：2
});
$CROPERMODAL.on（'click'，'CROPER upload'，函数（）{
//获取裁剪后的图像数据
$image.cropper（'getCroppedCanvas'{
宽度：400，
身高：300，
最小宽度：400，
身高：300，
最大宽度：4096，
最大高度：3072，
fillColor:“#fff”，
ImageSmoothInEnabled:错误，
图像平滑质量：“高”
})
.toBlob（函数（blob）{
var croppedFile=blobToFile（blob，文件名）；
crappedfile.accepted=true；
var files=myDropzone.getAcceptedFiles（）；
对于（var i=0；i

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>