图片上传后裁剪区域不随缩放同步，怎么解决？

西门云霞提问于 2026-03-16 22:09:20 阅读 81

交互

我用 cropperjs 做头像上传裁剪，图片加载后设置宽高为 100%，但容器大小变化时裁剪框位置就错乱了。明明调用了 cropper.resize()，可选区还是偏移，是不是漏了什么配置？

这是我的初始化代码：

const cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 1,
  autoCropArea: 0.8,
  responsive: true,
  restore: false,
  guides: false
});

我来解答赞 7 收藏

反馈

2 条解答

___玉娅 Lv1

应该是需要监听窗口或容器的 resize 事件，并在事件触发时调用 cropper.reset() 再调用 cropper.resize()。试试看这样：
pre class="pure-highlightjs line-numbers">

window.addEventListener('resize', () => {

  cropper.reset();

  cropper.resize();

});

2026-03-21 08:36

志丹 Lv1

问题出在图片加载后 cropper 没重新计算尺寸。图片加载完成后需要调用 cropper.reset() 或者用 cropper.replace(newSrc) 替换图片，它会自动重新计算。

如果你是动态加载图片，这样写：

image.src = url;

image.onload = function() {

  cropper.replace(url);

};

或者直接在图片加载完成后调用 cropper.reset() 强制重新计算裁剪框位置。

2026-03-18 07:03