Installation

npm install --save @types/croppie

Summary

This package contains type definitions for croppie (https://github.com/Foliotek/Croppie).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/croppie.

index.d.ts

1export as namespace Croppie;
2
3export = Croppie;
4
5declare class Croppie {
6    constructor(container: HTMLElement, options?: Croppie.CroppieOptions);
7
8    bind(options: {
9        url: string;
10        points?: number[] | undefined;
11        orientation?: number | undefined;
12        zoom?: number | undefined;
13        useCanvas?: boolean | undefined;
14    }): Promise<void>;
15
16    result(options: Croppie.ResultOptions & { type: "base64" | "canvas" }): Promise<string>;
17    result(options: Croppie.ResultOptions & { type: "html" }): Promise<HTMLElement>;
18    result(options: Croppie.ResultOptions & { type: "blob" }): Promise<Blob>;
19    result(options: Croppie.ResultOptions & { type: "rawcanvas" }): Promise<HTMLCanvasElement>;
20    result(options?: Croppie.ResultOptions): Promise<HTMLCanvasElement>;
21
22    get(): Croppie.CropData;
23
24    rotate(degrees: 90 | 180 | 270 | -90 | -180 | -270): void;
25
26    setZoom(zoom: number): void;
27
28    destroy(): void;
29}
30
31declare namespace Croppie {
32    type CropType = "square" | "circle";
33
34    type Format = "jpeg" | "png" | "webp";
35
36    type Type = "canvas" | "base64" | "html" | "blob" | "rawcanvas";
37
38    interface ResultOptions {
39        type?: Type | undefined;
40        size?: "viewport" | "original" | { width: number; height: number } | undefined;
41        format?: Format | undefined;
42        quality?: number | undefined;
43        circle?: boolean | undefined;
44    }
45
46    interface CroppieOptions {
47        boundary?: { width: number; height: number } | undefined;
48        customClass?: string | undefined;
49        enableExif?: boolean | undefined;
50        enableOrientation?: boolean | undefined;
51        enableZoom?: boolean | undefined;
52        enforceBoundary?: boolean | undefined;
53        enableResize?: boolean | undefined;
54        /** @default 1.5 */
55        maxZoom?: number | undefined;
56        /** @default 0 */
57        minZoom?: number | undefined;
58        mouseWheelZoom?: boolean | "ctrl" | undefined;
59        showZoomer?: boolean | undefined;
60        viewport?: { width: number; height: number; type?: CropType | undefined } | undefined;
61    }
62
63    interface CropData {
64        points?: number[] | undefined;
65        orientation?: number | undefined;
66        zoom?: number | undefined;
67    }
68}
69

Additional Details

• Last updated: Mon, 06 Nov 2023 22:41:05 GMT
• Dependencies: none

Credits

These definitions were written by Connor Peet, dklmuc, Sarun Intaralawan, and Knut Erik Helgesen.