使用场景
Cropper 用于裁切图片，支持自定义裁切框样式，可通过拖动调整裁切框位置，被裁切图片位置；可缩放，旋转被裁切图片。
代码演示
如何引入
import { Cropper } from '@chenzy-design/svelte';基本用法
通过 src 设置被裁切的图片；可通过 shape 设置裁切框形状，默认为方形。
自定义裁切框比例
可通过 defaultAspectRatio 设置初始的裁切框比例（默认为 1）。可通过 aspectRatio 设置固定的裁切框比例。
设置 aspectRatio 时，裁切框比例固定，拖动时裁切框将以此比例变化。
受控旋转/缩放图片
通过 rotate 和 zoom 控制图片旋转和缩放，可通过 onZoomChange 拿到最新的 zoom 值。
旋转
缩放
裁切框设置
可通过 cropperBoxStyle、cropperBoxClassName 自定义裁切框样式。可通过 showResizeBox 设置是否展示裁切框边角的调整块。
展示调整块
实时预览裁切效果
通过 preview 指定预览容器，实时预览裁切效果。
旋转
缩放
实时预览
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| aria-label | 容器无障碍名称（未设时走 locale Cropper.container，本库补充） | string | - |
| aspectRatio | 裁切框比例 | number | - |
| class | 类名 | string | - |
| cropperBoxClassName | 裁切框类名 | string | - |
| cropperBoxStyle | 裁切框样式 | string | - |
| defaultAspectRatio | 初始裁切框比例 | number | 1 |
| fill | 裁切结果中非图片部分的填充色 | string | rgba(0, 0, 0, 0) |
| imgProps | 透传给 img 标签的属性 | object | - |
| maxZoom | 最大缩放倍数 | number | 3 |
| minZoom | 最小缩放倍数 | number | 0.1 |
| onZoomChange | 缩放回调 | (zoom: number) => void | - |
| preview | 指定预览容器 | () => HTMLElement | - |
| rotate | 旋转角度 | number | - |
| shape | 裁切框形状 | 'rect' \| 'round' \| 'roundRect' | rect |
| showResizeBox | 是否展示调整块 | boolean | true |
| src | 图片地址 | string | - |
| style | 样式 | string | - |
| zoom | 缩放比例 | number | - |
| zoomStep | 缩放步长 | number | 0.1 |
Methods
绑定在组件实例上的方法，通过 bind:this 拿到实例后调用。
| Name | Description |
|---|---|
| getCropperCanvas | 获取裁剪图片的 canvas |
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --cd-cropper-box-outline-color | var(--cd-color-primary) | 裁切框 outline 颜色 |
| --cd-cropper-corner-bg | var(--cd-color-primary) | 裁切框 8 角点填充色（品牌色，对齐 Semi $color-cropper_box_corner-bg） |
| --cd-cropper-mask-bg | var(--cd-color-overlay-bg) | 裁切框外遮罩层背景色（半透明暗色） |
显示第 1 条-第 3 条，共 3 条
- 1