Cropper裁剪后图片变模糊怎么办？

UE丶可慧提问于 2026-03-01 05:40:22 阅读 4

组件

我在用 Vue + Cropper.js 做头像上传裁剪功能，裁剪完的图片导出后特别糊，明明原图很清晰。是不是我哪里参数没配对？

已经试过设置 quality: 1 和 imageSmoothingEnabled: true，但还是糊。导出时用的是 getCroppedCanvas() 方法。

<template>
  <div>
    <img ref="image" :src="imageUrl" alt="crop" />
    <button @click="getCropData">裁剪</button>
  </div>
</template>

<script>
export default {
  methods: {
    getCropData() {
      const canvas = this.cropper.getCroppedCanvas();
      console.log(canvas.toDataURL('image/jpeg', 1.0));
    }
  }
}
</script>

特殊组件

我来解答赞 8 收藏

反馈

1 条解答

明艳 ☘︎ Lv1

问题出在你没给 getCroppedCanvas() 传尺寸参数，它默认按容器显示尺寸输出，而不是原图的实际像素。最简单的办法，直接指定输出尺寸：

getCropData() {

  const canvas = this.cropper.getCroppedCanvas({

    width: 800,  // 你想要的输出宽度

    height: 800, // 你想要的输出高度

    imageSmoothingEnabled: true,

    imageSmoothingQuality: 'high'

  });

  console.log(canvas.toDataURL('image/jpeg', 1.0));

}

或者想保持原图裁剪区域的实际尺寸，就别限制宽高，让它自然输出，但初始化 Cropper 时记得配好 viewMode: 1 或 viewMode: 2，不然裁剪框可能跑飞。

2026-03-01 09:14