Dropzone.js上传图片后Cropper.js裁剪框不显示问题求助

问题描述 #

使用Dropzone.js上传图片后，图片能正常在模态框中显示，但Cropper.js的裁剪框无法出现。当前需要在模态框中支持两种场景：

• 裁剪已有图片（该场景正常工作）
• 用户通过Dropzone上传图片后进行裁剪（此场景存在问题）

图片保存后会发送至服务器，核心问题在于Cropper的初始化环节。

具体问题 #

通过Dropzone上传图片后，图片显示正常，但Cropper裁剪框不出现。调用initializeCropper后打印cropper变量，结果为null。

已尝试方案 #

• 确保图片元素完全加载后再初始化Cropper
• 检查initializeCropper的调用时机
• 添加控制台日志追踪初始化流程

预期行为 #

通过Dropzone添加图片并显示在模态框后，裁剪框应正常显示在图片上。

实际行为 #

图片正常显示，但裁剪框未出现。

代码示例 #

Dropzone.autoDiscover = false;
var cropper;

$(document).ready(function() {
  $('[data-bs-toggle="tooltip"]').tooltip();

  $('#cropperModal').on('shown.bs.modal', function() {
    console.log('shown.bs.modal called');
    let imageElm = document.getElementById('modalImage');
    $(imageElm).show();
    initializeCropper(imageElm);
    console.log('shown.bs.modal cropper');
    console.log(cropper);
  }).on('hidden.bs.modal', function() {
    if (cropper) {
      cropper.destroy();
      cropper = null;
      resetDropzone("#hidden-dropzone");
      $('#modalImage').attr('src', '').hide();
      $('#upload-button').hide();
    }
  });

  $('#upload-header, #upload-horizontal, #upload-logo').on('click', function() {
    let section = $(this).data('section');
    let imageUrl = $(this).find('img').attr('src');
    openModalAndInitializeDropzone(section, imageUrl);
  });

  $('#save-changes-button').on('click', function() {
    saveCroppedImage(cropper);
  });

  function openModalAndInitializeDropzone(section, imageUrl) {
    $('#status-gyph-image').html('').removeClass('text-success').removeClass('text-danger');
    $('#cropperModal').modal('show');
    $('#modalImage').attr('src', imageUrl).data('section', section).show();
    initializeDropzone("#hidden-dropzone");
  }

  function initializeDropzone(dropzoneId) {
    console.log('initializeDropzone called, ' + dropzoneId);
    if (Dropzone.instances.length > 0) {
      Dropzone.instances.forEach(instance => instance.destroy());
    }
    let dropzoneElement = document.querySelector(dropzoneId);
    if (!dropzoneElement.dropzone) {
      let dropzone = new Dropzone(dropzoneId, {
        url: "/file/post",
        maxFilesize: 2,
        acceptedFiles: ".jpeg,.jpg,.png",
        maxFiles: 1,
        init: function() {
          this.on("addedfile", function(file) {
            console.log('initializeDropzone addedfile');
            var reader = new FileReader();
            reader.onload = function(event) {
              $('#modalImage').attr('src', event.target.result).show();
              $('#modalImage').on('load', function() {
                console.log('......modalImage on load........');

                let imageElm = document.getElementById('modalImage');
                initializeCropper(imageElm);
                console.log(cropper);
              });
            };
            reader.readAsDataURL(file);
          });
          this.on("thumbnail", function(file) {
            file.previewElement.remove();
          });
        }
      });
      $(dropzoneId).css({
        display: 'block',
        width: '100%',
        height: '200px',
        border: '2px dashed #007bff',
        padding: '20px',
        textAlign: 'center',
        lineHeight: '160px',
        fontSize: '16px',
        color: '#007bff'
      }).text('Drag and drop an image here or click to upload');
    } else {
      console.log('Dropzone already initialized for this element.');
    }
  }

  function resetDropzone(dropzoneId) {
    let dropzoneElement = Dropzone.forElement(dropzoneId);
    if (dropzoneElement) {
      dropzoneElement.removeAllFiles(true);
    }
  }

  function initializeCropper(imageId) {
    console.log('initializeCropper called');
    var $image = $(imageId);
    console.log($image);
    console.log($image.length);
    if ($image.length) {
      if (cropper) {
        cropper.destroy();
      }
      $image.cropper({
        autoCropArea: 0.5,
        responsive: true,
        viewMode: 2,
        scalable: false,
        zoomable: false,
        crop: function(e) {},
        ready: function() {
          console.log('ready called');
          cropper = $image.data('cropper');
          console.log(cropper);
        }
      });
      $('#upload-button').show();
      return $image.data('cropper');
    }
    console.error('Image element not found:', imageId);
    return null;
  }

  function saveCroppedImage(cropper) {
    if (cropper) {
      var canvas = cropper.getCroppedCanvas();
      let imageElm = document.getElementById('modalImage');
      let section = $(imageElm).data('section');
      if (canvas) {
        canvas.toBlob(function(blob) {
          var formData = new FormData();
          console.log(formData);
          formData.append('croppedImage', blob, 'croppedImage.' + blob.type.split('/')[1]);
          formData.append('section', section);
          $.ajax('/main/uploadFile', {
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
              $('#status-gyph-image').html('<strong>Successfully saved image.</strong>').addClass('text-success').removeClass('text-danger');
            },
            error: function(xhr, status, error) {
              $('#status-gyph-image').html('An internal error occurred.').addClass('text-danger').removeClass('text-success');
            }
          });
        });
      } else {
        $('#status-gyph-image').html('An internal error occurred.').addClass('text-danger').removeClass('text-success');
      }
    }
  }
});

内容的提问来源于stack exchange，提问作者Stephanie Fischer