zhangwencui
7 天以前 bbb54adc8d9fd6ae6b87ac036c8b21f3ad7daef4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import type { ButtonProps } from 'ant-design-vue';
import type Cropper from 'cropperjs';
 
import type { CSSProperties } from 'vue';
 
export interface apiFunParams {
  file: Blob;
  filename: string;
  name: string;
}
 
export interface CropendResult {
  imgBase64: string;
  imgInfo: Cropper.Data;
}
 
export interface CropperProps {
  src?: string;
  alt?: string;
  circled?: boolean;
  realTimePreview?: boolean;
  height?: number | string;
  crossorigin?: '' | 'anonymous' | 'use-credentials' | undefined;
  imageStyle?: CSSProperties;
  options?: Cropper.Options;
}
 
export interface CropperAvatarProps {
  width?: number | string;
  value?: string;
  showBtn?: boolean;
  btnProps?: ButtonProps;
  btnText?: string;
  uploadApi?: (params: apiFunParams) => Promise<any>;
  size?: number;
}
 
export interface CropperModalProps {
  circled?: boolean;
  uploadApi?: (params: apiFunParams) => Promise<any>;
  src?: string;
  size?: number;
}
 
export const defaultOptions: Cropper.Options = {
  aspectRatio: 1,
  zoomable: true,
  zoomOnTouch: true,
  zoomOnWheel: true,
  cropBoxMovable: true,
  cropBoxResizable: true,
  toggleDragModeOnDblclick: true,
  autoCrop: true,
  background: true,
  highlight: true,
  center: true,
  responsive: true,
  restore: true,
  checkCrossOrigin: true,
  checkOrientation: true,
  scalable: true,
  modal: true,
  guides: true,
  movable: true,
  rotatable: true,
};
 
export type { Cropper as CropperType };