Cropper 图片裁切

自由裁切图片，支持缩放、旋转与固定比例

何时使用

  • 需要裁切图片时。

导入

import { Cropper } from "@reglow/reui";

基础用法

通过 src 设置被裁切的图片，通过 shape 设置裁切框形状。

<script setup>
import { ref } from "vue";
import { Cropper } from "@reglow/reui";

const cropperRef = ref();
const cropperUrl = ref("");
const shape = ref("rect");

const onCrop = () => {
  const canvas = cropperRef.value.getCropperCanvas();
  cropperUrl.value = canvas.toDataURL();
};
</script>

<template>
  <div class="flex gap-4">
    <Cropper
      ref="cropperRef"
      :shape="shape"
      src="https://example.com/image.png"
      :style="{ width: '550px', height: '300px' }"
    />
    <div>
      <button @click="onCrop">裁切</button>
      <img v-if="cropperUrl" :src="cropperUrl" class="mt-2 max-w-200px" />
    </div>
  </div>
</template>

更多示例

裁切框形状

支持 rect（方形）、round（圆形）、roundRect（圆角方形）。

<template>
  <Cropper src="/image.png" shape="round" :style="{ width: '300px', height: '300px' }" />
  <Cropper src="/image.png" shape="roundRect" :style="{ width: '300px', height: '300px' }" />
</template>

固定裁切框比例

通过 aspectRatio 设置固定比例，拖动时裁切框按此比例变化。

<template>
  <!-- 3:4 比例 -->
  <Cropper
    :aspect-ratio="3 / 4"
    src="/image.png"
    :style="{ width: '550px', height: '300px' }"
  />
</template>

受控旋转/缩放

通过 rotate 和 zoom 控制图片旋转和缩放。

<script setup>
import { ref } from "vue";

const rotate = ref(0);
const zoom = ref(1);
</script>

<template>
  <div>
    <Cropper
      :rotate="rotate"
      :zoom="zoom"
      src="/image.png"
      :style="{ width: '550px', height: '300px' }"
      @zoom-change="(val) => zoom = val"
    />
    <div class="mt-4 flex gap-4">
      <div>
        <label>旋转: {{ rotate }}°</label>
        <input type="range" v-model.number="rotate" min="-360" max="360" />
      </div>
      <div>
        <label>缩放: {{ zoom.toFixed(1) }}</label>
        <input type="range" v-model.number="zoom" :min="0.1" :max="3" :step="0.1" />
      </div>
    </div>
  </div>
</template>

滚轮缩放

组件内置滚轮缩放，滚动鼠标滚轮即可缩放图片。

<template>
  <Cropper
    src="/image.png"
    :min-zoom="0.1"
    :max-zoom="3"
    :zoom-step="0.1"
    @zoom-change="(val) => console.log(val)"
    :style="{ width: '550px', height: '300px' }"
  />
</template>

实时预览

通过 preview 指定预览容器，实时预览裁切效果。

<script setup>
import { ref } from "vue";

const previewRef = ref();
</script>

<template>
  <div class="flex gap-4">
    <Cropper
      src="/image.png"
      :preview="() => previewRef.value"
      :style="{ width: '550px', height: '300px' }"
    />
    <div>
      <p>实时预览</p>
      <div ref="previewRef" class="w-100px h-100px overflow-hidden border rounded" />
    </div>
  </div>
</template>

获取裁切结果

通过 ref 调用 getCropperCanvas 方法获取裁切后的 canvas。

<script setup>
import { ref } from "vue";

const cropperRef = ref();

const getCroppedImage = () => {
  const canvas = cropperRef.value.getCropperCanvas();
  // 转 base64
  const dataUrl = canvas.toDataURL("image/png");
  console.log(dataUrl);
  // 转 Blob
  canvas.toBlob((blob) => {
    console.log(blob);
  });
};
</script>

<template>
  <Cropper ref="cropperRef" src="/image.png" :style="{ width: '550px', height: '300px' }" />
  <button @click="getCroppedImage">获取裁切结果</button>
</template>

填充色

通过 fill 设置裁切结果中非图片部分的填充色。

<template>
  <Cropper
    src="/image.png"
    fill="rgba(0, 0, 0, 0.5)"
    :style="{ width: '550px', height: '300px' }"
  />
</template>

API

Props

参数说明类型默认值
src图片地址string""
shape裁切框形状rect | round | roundRectrect
aspectRatio固定裁切框比例number-
defaultAspectRatio初始裁切框比例number1
rotate旋转角度number0
zoom缩放比例number1
minZoom最小缩放倍数number0.1
maxZoom最大缩放倍数number3
zoomStep缩放步长number0.1
fill裁切结果填充色stringrgba(0, 0, 0, 0)
showResizeBox是否显示调整块booleantrue
cropperBoxStyle裁切框样式CSSProperties-
cropperBoxClassName裁切框类名string-
preview预览容器() => HTMLElement-
imgProps透传给 img 的属性object-
style容器样式CSSProperties-
class附加类名string-

Events

事件说明回调参数
zoomChange缩放回调(zoom: number)

Methods

方法名说明返回值
getCropperCanvas获取裁切后的 canvasHTMLCanvasElement

裁切框形状

shape说明
rect方形
round圆形
roundRect圆角方形
ConfigProvider 全局化配置
为组件提供统一的语言、主题、尺寸等全局配置
FloatButton 悬浮按钮
用于全局页面的快捷操作入口，如回到顶部、帮助、客服等。