Croppie JS裁剪图片返回空白图问题求助

看起来你遇到的问题很典型，我帮你梳理几个关键问题点，应该能解决空白图的困扰：

1. 预览区DOM结构干扰Croppie工作 #

你的<div id="preview">里嵌套了一个<img>标签，但Croppie初始化时会自动生成专属的图片容器和控制元素，这个多余的<img>会打乱Croppie的内部逻辑。先把这个img标签删掉，修改后的预览区代码：

<div class="modal-body">
  <div id="preview"></div>
</div>

2. 图片绑定逻辑错误（补全readURL函数） #

你提供的readURL函数不完整，猜测你可能是直接给预览图设置了src，但没有通过Croppie的API来加载图片。正确的做法是用Croppie的bind方法完成图片加载：

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      // 通过Croppie绑定图片，而非手动修改img的src
      $image_crop.croppie('bind', {
        url: e.target.result
      }).then(function(){
        console.log('图片已成功加载到Croppie');
      });
      // 弹出裁剪模态框
      $('#cropper').modal('show');
    };
    reader.readAsDataURL(input.files[0]);
  }
}

3. 保存按钮事件绑定失效 #

因为模态框是动态渲染的，直接绑定.save按钮的点击事件可能会失效，建议用事件委托来确保事件能被正确触发：

$(document).on('click', '.save', function(){
  // 获取裁剪后的图片，指定输出类型和尺寸
  $image_crop.croppie('result', {
    type: 'canvas',
    size: 'viewport' // 输出与裁剪视口一致的尺寸
  }).then(function(response){
    // 这里可以处理裁剪结果，比如预览或提交到后台
    console.log('裁剪完成的图片数据:', response);
    // 示例：把结果展示到页面
    // $('#final-avatar').attr('src', response);
    $('#cropper').modal('hide');
  });
});

4. 确保Croppie初始化时机正确 #

把Croppie的初始化代码放在$(document).ready()中，保证DOM完全加载后再初始化实例：

$(document).ready(function(){
  $image_crop = $('#preview').croppie({
    enableExif: true,
    viewport: {
      width: 150,
      height: 150,
      type: 'circle'
    },
    boundary: {
      width: 300,
      height: 300
    }
  });

  // 绑定文件输入框的change事件
  $('#studentAvatar').on('change', function(){
    readURL(this);
  });
});

空白图问题的核心原因 #

最可能的情况是你没有通过Croppie的API绑定图片，而是手动操作了img标签，导致Croppie内部没有正确加载图片数据，调用result方法时自然返回空白。另外，事件绑定失效会让保存按钮根本没触发裁剪逻辑，看起来也像是返回了空白。

把这些修改后，应该就能正常获取裁剪后的圆形图片了。

内容的提问来源于stack exchange，提问作者Mr. Pyramid