vue-select-avatar/dist/index.d.ts

一个头像集选择/裁剪的组件库

import * as _$vue from "vue";
import { ComputedRef, Reactive, Ref } from "vue";

//#region lib/components/Viewport.vue.d.ts
declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
type __VLS_Slots = {} & {
  'point-top-left'?: (props: typeof __VLS_1) => any;
} & {
  'point-top-right'?: (props: typeof __VLS_3) => any;
} & {
  'point-bottom-left'?: (props: typeof __VLS_5) => any;
} & {
  'point-bottom-right'?: (props: typeof __VLS_7) => any;
};
declare const __VLS_base: _$vue.DefineComponent<ViewportProps, {
  select: (options?: ImageSelectOptions) => Promise<void>;
  crop: <T extends File | string = string | File>(options?: CropOptions) => Promise<T>;
  positionInit: (res: ImageSelectResult) => void;
  elEmitter: HTMLDivElement;
  backing: _$vue.Ref<boolean, boolean>;
}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ViewportProps> & Readonly<{}>, {
  size: number | "full";
  width: number | "full";
  height: number | "full";
  info: ImageInfo;
  view: number;
  grid: boolean;
  step: number;
  ctrlStep: number;
  shiftStep: number;
  reverse: boolean;
  minView: number;
  padding: number;
  arrow: boolean;
  wasd: boolean;
  mask: "clip" | "double";
  mode: "fixed-view" | "fixed-image";
  border: boolean | number;
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export$1: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default$1: typeof __VLS_export$1;
type __VLS_WithSlots<T, S> = T & {
  new (): {
    $slots: S;
  };
};
//#endregion
//#region lib/types.d.ts
type ViewportInstance = InstanceType<typeof _default$1>;
/**
 * 位置信息
 */
interface Position {
  viewportWidth: number;
  viewportHeight: number;
  viewX: number;
  viewY: number;
  viewSize: number;
  imageX: number;
  imageY: number;
  imageWidth: number;
  imageHeight: number;
  imageScale: number;
}
interface SimplePosition {
  x: number;
  y: number;
}
interface ViewportProps {
  /**
   * 视口尺寸（同时设置宽高）
   *
   * @default 300
   */
  size?: number | 'full';
  /**
   * 视口宽度（覆盖size）
   */
  width?: number | 'full';
  /**
   * 视口高度（覆盖size）
   */
  height?: number | 'full';
  /**
   * 图片信息
   */
  info?: ImageInfo;
  /**
   * 观察窗口大小（<=1 表示比例，>1 表示像素值）
   *
   * @default 0.6
   */
  view?: number;
  /**
   * 是否为网格背景
   *
   * @default false
   */
  grid?: boolean;
  /**
   * 缩放步长（<1 表示比例，>=1 表示像素值）
   *
   * @default 0.05
   */
  step?: number;
  /**
   * 缩放步长（按下Ctrl键时，设置为0时，则不生效，<1 表示比例，>=1 表示像素值）
   *
   * @default 0.02
   */
  ctrlStep?: number;
  /**
   * 缩放步长（按下Shift键时，设置为0时，则不生效，<1 表示比例，>=1 表示像素值）
   *
   * @default 2
   */
  shiftStep?: number;
  /**
   * 滚轮反向
   *
   * @default false
   */
  reverse?: boolean;
  /**
   * 最小观察窗口尺寸（mode=fixed-image 时生效）
   *
   * @default 10
   */
  minView?: number;
  /**
   * 图片边距（mode=fixed-image 时生效）
   *
   * @default 10
   */
  padding?: number;
  /**
   * 方向键移动
   *
   * @default true
   */
  arrow?: boolean;
  /**
   * wasd 键移动
   *
   * @default true
   */
  wasd?: boolean;
  /**
   * 遮罩实现方式
   *
   * - 'clip'：使用 clip-path
   * - 'double'：使用双层图片
   *
   * @default 'clip'
   */
  mask?: 'clip' | 'double';
  /**
   * 移动模式：'fixed-view'=观察窗固定图片移动，'fixed-image'=图片固定观察窗移动
   *
   * @default 'fixed-view'
   */
  mode?: 'fixed-view' | 'fixed-image';
  /**
   * 是否显示观察窗边框
   *
   * @default false
   */
  border?: boolean | number;
}
interface ViewportExposes {
  /**
   * 选择图片
   * @param options 选择图片选项
   */
  select: (options?: ImageSelectOptions) => Promise<void>;
  /**
   * 裁剪图片
   * @param options 裁剪选项
   * @returns 裁剪后的图片信息
   */
  crop: <T extends File | string = string | File>(options?: CropOptions) => Promise<T>;
  /**
   * 初始化位置信息
   * @param res 图片信息
   */
  positionInit: (res: ImageSelectResult) => void;
}
interface ImageSelectOptions {
  /**
   * 允许的文件类型（参考input的accept属性）
   *
   * @default DEFAULT_ACCEPT
   */
  accept?: string;
  /**
   * 最大文件大小（单位：字节）
   * @default 2 * 1024 * 1024
   */
  maxFileSize?: number;
  /**
   * 图片最小尺寸（宽高任一小于该值则无效）
   */
  minSize?: number;
  /**
   * 图片最大尺寸（宽高任一超过该值则无效）
   * @default 5000
   */
  maxSize?: number;
  /**
   * 超过最大尺寸时是否等比例缩放到最大尺寸
   * @default false
   */
  resizeToMax?: boolean;
  /**
   * 是否启用压缩
   * - true：全部压缩
   * - number：文件大于该值时压缩（单位：字节）
   * @default false
   */
  compress?: boolean | number;
  /**
   * 压缩质量（0-1）
   * @default 0.8
   */
  quality?: number;
  /**
   * 矢量图最小尺寸
   * @default 1024
   */
  minVectorSize?: number;
}
interface ImageSelectResult {
  file: File;
  width: number;
  height: number;
}
interface ImageInfo extends ImageSelectResult {
  url?: string;
}
type CropFormat = 'file' | 'base64';
interface CropOptions {
  /**
   * 数据格式
   */
  format?: CropFormat;
  /**
   * 输出图片尺寸
   */
  size?: number;
  /**
   * 最大输出图片尺寸（如果截取图片尺寸超过该值则等比例缩放到该尺寸，如果设置了 size，该属性则无效）
   */
  maxSize?: number;
  /**
   * 如果截取图片尺寸小于 size 时，则使用截取图片的尺寸
   * （如果还是使用 size 作为图片尺寸，则会将图片等比例放大，会造成文件大小变大）
   * （仅在设置了 size 时生效）
   */
  useOriginSize?: boolean;
  /**
   * 输出图片类型
   */
  type?: 'image/jpeg' | 'image/png' | 'image/webp';
  /**
   * 输出图片质量（0-1）
   */
  quality?: number;
  /**
   * 文件名
   */
  filename?: string;
  /**
   * 当输出图片类型为 image/jpeg 的底色
   */
  backgroundColor?: string;
}
type PointPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
interface PreviewProps {
  /**
   * 预览尺寸
   *
   * @default 180
   */
  size?: number | 'full';
  /**
   * 视口实例
   */
  viewportRef?: ViewportInstance;
  /**
   * 是否圆形
   */
  round?: boolean;
  /**
   * 背景颜色
   */
  bg?: string;
}
type ErrorCode = 'UNKNOWN' | 'CANCEL' | 'NOT_IMAGE_FILES' | 'IMAGE_FILE_TOO_LARGE' | 'IMAGE_TOO_SMALL' | 'IMAGE_TOO_LARGE' | 'IMAGE_LOAD_FAILED' | 'CANVAS_TO_BLOB_FAILED' | 'BLOB_TO_BASE64_FAILED' | 'CANVAS_CONTEXT_NOT_DEFINED' | 'NO_IMAGE_SELECTED';
/**
 * 多语言key
 */
type Locale = { [K in ErrorCode]: string };
interface HookContext {
  props: ViewportProps;
  pos: Reactive<Position>;
  info: Ref<ImageInfo | undefined>;
  imageMoving: Ref<boolean, boolean>;
  viewMoving: Ref<boolean, boolean>;
  viewResizing: Ref<boolean, boolean>;
  viewportRef: Ref<HTMLElement | undefined>;
  minImageScale: Ref<number>;
  step: Ref<number>;
  ctrlStep: Ref<number>;
  shiftStep: Ref<number>;
  pressCtrl: Ref<boolean>;
  pressShift: Ref<boolean>;
  isClipPathSupported: Ref<boolean>;
  pointPosition: Ref<PointPosition | undefined>;
  backing: Ref<boolean>;
  elEmitter: HTMLElement;
  showViewLayer: ComputedRef<boolean>;
  checkImageBack: (transition?: boolean) => void;
  checkViewPosition: () => void;
  resizeView: (newPos: SimplePosition) => void;
  broadcastInfo: () => void;
  broadcastPos: () => void;
}
type NativeType = null | undefined | number | string | boolean | symbol | Function;
type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never);
type InferDefaults<T> = { [K in keyof T]?: InferDefault<T, T[K]> };
//#endregion
//#region lib/utils.d.ts
interface SelectFileOptions {
  accept?: string;
  multiple?: boolean;
}
/**
 * 选择文件
 * @example
 * selectFile({ accept: 'image/*', multiple: true }).then(files => {
 *     console.log(files)
 * })
 */
declare const selectFile: (options?: SelectFileOptions) => Promise<File[]>;
/**
 * 选择并验证图片文件
 * @param options 图片选择配置选项
 * @returns 验证通过的File对象数组
 */
declare const selectImage: (options?: ImageSelectOptions) => Promise<ImageSelectResult>;
declare const loadImage: (url: string, revoke?: boolean) => Promise<HTMLImageElement>;
declare const canvasToBlob: (canvas: HTMLCanvasElement, type?: string, quality?: number) => Promise<Blob>;
declare const blobToBase64: (blob: Blob) => Promise<string>;
//#endregion
//#region lib/defaults.d.ts
declare const DEFAULT_ACCEPT = "image/jpeg, image/png, image/webp, image/bmp, image/svg+xml, image/avif, image/tiff";
declare const DEFAULT_VIEWPORT_PROPS: Readonly<ViewportProps>;
//#endregion
//#region lib/error.d.ts
declare class AvatarError extends Error {
  /**
   * 判断是否是 AvatarError
   */
  static is(value: unknown): value is AvatarError;
  /**
   * 判断是否是取消错误
   */
  static isCancel(value: unknown): value is AvatarError;
  readonly code: ErrorCode;
  constructor(code: ErrorCode);
}
//#endregion
//#region lib/locales/zh_cn.d.ts
declare const _default$3: {
  UNKNOWN: string;
  CANCEL: string;
  NOT_IMAGE_FILES: string;
  IMAGE_FILE_TOO_LARGE: string;
  IMAGE_TOO_SMALL: string;
  IMAGE_TOO_LARGE: string;
  IMAGE_LOAD_FAILED: string;
  CANVAS_TO_BLOB_FAILED: string;
  BLOB_TO_BASE64_FAILED: string;
  CANVAS_CONTEXT_NOT_DEFINED: string;
  NO_IMAGE_SELECTED: string;
};
//#endregion
//#region lib/locales/en.d.ts
declare const _default$2: {
  UNKNOWN: string;
  CANCEL: string;
  NOT_IMAGE_FILES: string;
  IMAGE_FILE_TOO_LARGE: string;
  IMAGE_TOO_SMALL: string;
  IMAGE_TOO_LARGE: string;
  IMAGE_LOAD_FAILED: string;
  CANVAS_TO_BLOB_FAILED: string;
  BLOB_TO_BASE64_FAILED: string;
  CANVAS_CONTEXT_NOT_DEFINED: string;
  NO_IMAGE_SELECTED: string;
};
//#endregion
//#region lib/locales/index.d.ts
declare function setLocale(locale: Locale): void;
//#endregion
//#region lib/components/Preview.vue.d.ts
declare const __VLS_export: _$vue.DefineComponent<PreviewProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<PreviewProps> & Readonly<{}>, {
  size: number | "full";
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
declare const _default: typeof __VLS_export;
//#endregion
export { AvatarError, CropFormat, CropOptions, DEFAULT_ACCEPT, DEFAULT_VIEWPORT_PROPS, ErrorCode, HookContext, ImageInfo, ImageSelectOptions, ImageSelectResult, InferDefaults, Locale, PointPosition, Position, _default as Preview, PreviewProps, type SelectFileOptions, SimplePosition, _default$1 as Viewport, ViewportExposes, ViewportInstance, ViewportProps, blobToBase64, canvasToBlob, _default$2 as en, loadImage, selectFile, selectImage, setLocale, _default$3 as zh_cn };