Cropper.js程序化裁剪问题：初始化后无法获取裁剪画布

我之前也碰到过类似的情况，Cropper.js的autoCrop配置确实容易让人产生误解：它仅仅会自动帮你创建裁剪框，但并不会自动触发完整的裁剪计算流程，这就是为什么你发现cropper.cropped为false，调用getCroppedCanvas()返回null的核心原因。

要实现初始化后立即生成裁剪预览，你需要利用Cropper的ready事件，并手动触发裁剪动作，具体步骤如下：

1. 等待Cropper初始化完成 #

Cropper的初始化是异步的（需要等待图片加载、裁剪框DOM创建等操作完成），所以必须在ready回调中执行后续的裁剪操作，这个事件会在Cropper完全初始化完成后触发。

2. 手动触发裁剪流程 #

在ready回调中调用crop()方法，这个方法会触发Cropper的裁剪计算，将cropped状态设置为true，之后就能正常获取裁剪后的Canvas了。

修改后的完整代码示例 #

var cropper = new Cropper(document.getElementById('img'), {
  autoCrop: true,
  autoCropArea: 1,
  aspectRatio: 500 / 660,
  minCropBoxWidth: 500,
  minCropBoxHeight: 660,
  viewMode: 2,
  // 初始化完成后触发的回调
  ready: function() {
    // 手动触发裁剪，确保完成裁剪计算
    this.crop();
    
    // 现在可以正常获取裁剪后的Canvas
    var croppedCanvas = cropper.getCroppedCanvas();
    if (croppedCanvas) {
      // 这里可以将预览添加到页面，或者进行其他处理
      // 示例：创建一个预览容器插入到页面
      var previewContainer = document.createElement('div');
      previewContainer.style.marginTop = '20px';
      previewContainer.appendChild(croppedCanvas);
      document.body.appendChild(previewContainer);
    }
  }
});

额外说明 #

• 如果你需要对裁剪后的Canvas做尺寸调整，可以在getCroppedCanvas()中传入参数，比如getCroppedCanvas({ width: 500, height: 660 })，确保输出的Canvas符合你的尺寸要求。
• 确保目标图片元素已经正确加载完成，如果图片是动态插入的，最好先监听图片的load事件再初始化Cropper，不过Cropper的ready事件已经包含了图片加载完成的时机，所以一般不需要额外处理。

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