Add typings for croppie@2.4.0 (#13046)

croppie/croppie-tests.ts

@@ -0,0 +1,26 @@
+import Croppie from 'croppie';
+
+const c = new Croppie(document.getElementById('item'), {
+    boundary: { width: 300, height: 300 },
+    viewport: { width: 100, height: 100 },
+    showZoomer: false,
+    enableOrientation: false,
+});
+
+
+c.bind({
+    url: 'demo/demo-2.jpg',
+    orientation: 4,
+    zoom: 0,
+});
+
+c.rotate(90);
+
+c.setZoom(0.5);
+
+c.result({ type: 'blob' }).then(blob => {
+    let x: Blob;
+    x = blob;
+});
+
+c.destroy();

croppie/index.d.ts

@@ -0,0 +1,52 @@
+// Type definitions for croppie 2.4
+// Project: https://github.com/Foliotek/Croppie
+// Definitions by: Connor Peet <https://github.com/connor4312>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+export default class Croppie {
+    constructor(container: HTMLElement, options?: CroppieOptions);
+
+    bind(options: {
+        url: string,
+        points?: number[],
+        orientation?: number,
+        zoom?: number,
+        useCanvas?: boolean,
+    }): Promise<void>;
+
+    result(options: ResultOptions & { type: 'base64' }): Promise<string>;
+    result(options: ResultOptions & { type: 'html' }): Promise<HTMLElement>;
+    result(options: ResultOptions & { type: 'blob' }): Promise<Blob>;
+    result(options: ResultOptions & { type: 'canvas' }): Promise<HTMLCanvasElement>;
+    result(options?: ResultOptions): Promise<HTMLCanvasElement>;
+
+    rotate(degrees: 90 | 180 | 270 | -90 | -180 | -270): void;
+
+    setZoom(zoom: number): void;
+
+    destroy(): void;
+}
+
+
+export type CropType = 'square' | 'circle';
+
+export type Format = 'jpeg' | 'png' | 'webp';
+
+export interface ResultOptions {
+    size?: 'viewport' | 'original' | { width: number, height: number };
+    format?: Format;
+    quality?: number;
+    circle?: boolean;
+}
+
+export interface CroppieOptions {
+    boundary?: { width: number, height: number };
+    customClass?: string;
+    enableExif?: boolean;
+    enableOrientation?: boolean;
+    enableZoom?: boolean;
+    enforceBoundary?: boolean;
+    mouseWheelZoom?: boolean;
+    showZoomer?: boolean;
+    viewport?: { width: number, height: number, type?: CropType };
+}

croppie/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es6",
+        "noImplicitAny": true,
+        "strictNullChecks": false,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "croppie-tests.ts"
+    ]
+}

croppie/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }