69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
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 };
|