mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
Merge pull request #8819 from stepancar/patch-16
added cropperjs definitions
This commit is contained in:
Masahiro Wakame
@@ -0,0 +1,2 @@
|
||||
/// <reference path="./cropperjs.d.ts"/>
|
||||
import * as Cropper from 'cropperjs';
|
||||
Vendored
+452
@@ -0,0 +1,452 @@
|
||||
// Type definitions for cropperjs
|
||||
// Project: https://github.com/fengyuanchen/cropperjs
|
||||
// Definitions by: Stepan Mikhaylyuk <https://github.com/stepancar>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
|
||||
|
||||
declare module cropperjs {
|
||||
export enum CropperViewMods {
|
||||
CropBoxIsJustWithInTheContainer = 0,
|
||||
CropBoxShouldBeWithInTheCanvas = 1,
|
||||
CanvasShouldNotBeWithInTheContainer = 2,
|
||||
ContainerSshouldBeWithInTheCanvas = 3
|
||||
}
|
||||
export interface CropperOptions {
|
||||
/**
|
||||
* Define the view mode of the cropper.
|
||||
* @default 0
|
||||
*/
|
||||
viewMode?: CropperViewMods;
|
||||
/**
|
||||
* Define the dragging mode of the cropper.
|
||||
* 'crop': create a new crop box
|
||||
* 'move': move the canvas
|
||||
* 'none': do nothing
|
||||
*/
|
||||
dragMode?: string;
|
||||
/**
|
||||
* Set the aspect ratio of the crop box. By default, the crop box is free ratio.
|
||||
* @default Nan
|
||||
*/
|
||||
aspectRatio?: number;
|
||||
/**
|
||||
* The previous cropped data if you had stored, will be passed to setData method automatically.
|
||||
* @default null
|
||||
*/
|
||||
data?: Object;
|
||||
/**
|
||||
* Add extra elements (containers) for previewing.
|
||||
* Valid selector for Document.querySelectorAll
|
||||
* @default ''
|
||||
*/
|
||||
preview?: string;
|
||||
/**
|
||||
* Rebuild the cropper when resize the window.
|
||||
* @default true
|
||||
*/
|
||||
responsive?: boolean;
|
||||
/**
|
||||
* By default, the plugin will check the image origin, and if it is a cross-origin image,
|
||||
* a crossOrigin attribute will be added to the image element and a timestamp will be added to the image url to reload the image for "getCroppedCanvas".
|
||||
* By adding crossOrigin attribute to image will stop adding timestamp to image url, and stop reload of image.
|
||||
* @default true
|
||||
*/
|
||||
checkCrossOrigin?: boolean;
|
||||
/**
|
||||
* Show the black modal above the image and under the crop box.
|
||||
* @default true
|
||||
*/
|
||||
modal?: boolean;
|
||||
/**
|
||||
* Show the dashed lines above the crop box.
|
||||
* @default true
|
||||
*/
|
||||
guides?: boolean;
|
||||
/**
|
||||
* Show the center indicator above the crop box.
|
||||
* @default true
|
||||
*/
|
||||
center?: boolean;
|
||||
/**
|
||||
* Show the white modal above the crop box (highlight the crop box).
|
||||
* @default true
|
||||
*/
|
||||
highlight?: boolean;
|
||||
/**
|
||||
* Show the grid background of the container.
|
||||
* @default true
|
||||
*/
|
||||
background?: boolean;
|
||||
/**
|
||||
* Enable to crop the image automatically when initialize.
|
||||
* @default true
|
||||
*/
|
||||
autoCrop?: boolean;
|
||||
/**
|
||||
* A number between 0 and 1. Define the automatic cropping area size (percentage).
|
||||
* @default 0.8 (80% of the image)
|
||||
*/
|
||||
autoCropArea?: number;
|
||||
/**
|
||||
* Enable to move the image.
|
||||
* @default true
|
||||
*/
|
||||
movable?: boolean;
|
||||
/**
|
||||
* Enable to rotate the image.
|
||||
* @default true
|
||||
*/
|
||||
rotatable?: boolean;
|
||||
/**
|
||||
* Enable to scale the image.
|
||||
* @default true
|
||||
*/
|
||||
scalable?: boolean;
|
||||
/**
|
||||
* Enable to zoom the image.
|
||||
* @default true
|
||||
*/
|
||||
zoomable?: boolean;
|
||||
/**
|
||||
* Enable to zoom the image by dragging touch.
|
||||
* @default true
|
||||
*/
|
||||
zoomOnTouch?: boolean;
|
||||
/**
|
||||
* Enable to zoom the image by wheeling mouse.
|
||||
* @default true
|
||||
*/
|
||||
zoomOnWheel?: boolean;
|
||||
/**
|
||||
* Define zoom ratio when zoom the image by wheeling mouse.
|
||||
* @default 0.1
|
||||
*/
|
||||
wheelZoomRatio?: number;
|
||||
/**
|
||||
* Enable to move the crop box.
|
||||
* @default true
|
||||
*/
|
||||
cropBoxMovable?: boolean;
|
||||
/**
|
||||
* Enable to resize the crop box.
|
||||
* @default true
|
||||
*/
|
||||
cropBoxResizable?: boolean;
|
||||
/**
|
||||
* Enable to toggle drag mode between "crop" and "move" when click twice on the cropper.
|
||||
* @default true
|
||||
*/
|
||||
toggleDragModeOnDblclick?: boolean;
|
||||
/**
|
||||
* The minimum width of the container
|
||||
* @default 200
|
||||
*/
|
||||
minContainerWidth?: number;
|
||||
/**
|
||||
* The minimum height of the container.
|
||||
* @default 100
|
||||
*/
|
||||
minContainerHeight?: number;
|
||||
/**
|
||||
* The minimum width of the canvas (image wrapper).
|
||||
* @default 0
|
||||
*/
|
||||
minCanvasWidth?: number;
|
||||
/**
|
||||
* The minimum height of the canvas (image wrapper).
|
||||
* @default 0
|
||||
*/
|
||||
minCanvasHeight?: number;
|
||||
/**
|
||||
* The minimum width of the crop box.
|
||||
* @default 0
|
||||
*/
|
||||
minCropBoxWidth?: number;
|
||||
/**
|
||||
* The minimum height of the crop box.
|
||||
* @default 0
|
||||
*/
|
||||
minCropBoxHeight?: number;
|
||||
/**
|
||||
* This function will be called when a cropper instance starts to load an image.
|
||||
* Return false to prevent to build
|
||||
* @default null
|
||||
*/
|
||||
build?: () => boolean;
|
||||
/**
|
||||
* This function will be called when a cropper instance has built completely.
|
||||
* @default null
|
||||
*/
|
||||
built?: () => void;
|
||||
}
|
||||
interface Data {
|
||||
/**
|
||||
* the offset left of the cropped area
|
||||
*/
|
||||
x: number;
|
||||
/**
|
||||
* the offset top of the cropped area
|
||||
*/
|
||||
y: number;
|
||||
/**
|
||||
* the width of the cropped area
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* the height of the cropped area
|
||||
*/
|
||||
height: number;
|
||||
/**
|
||||
* the rotated degrees of the image
|
||||
*/
|
||||
rotate: number;
|
||||
/**
|
||||
* the scaling factor to apply on the abscissa of the image
|
||||
*/
|
||||
scaleX: number;
|
||||
/**
|
||||
* the scaling factor to apply on the ordinate of the image
|
||||
*/
|
||||
scaleY: number;
|
||||
}
|
||||
interface ContainerData {
|
||||
/**
|
||||
* The current width of the container
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* The current height of the container
|
||||
*/
|
||||
height: number;
|
||||
}
|
||||
interface CropBoxData {
|
||||
/**
|
||||
* the offset left of the crop box
|
||||
*/
|
||||
left: number;
|
||||
/**
|
||||
* the offset top of the crop box
|
||||
*/
|
||||
top: number;
|
||||
/**
|
||||
* the width of the crop box
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* the height of the crop box
|
||||
*/
|
||||
height: number;
|
||||
}
|
||||
interface CanvasData {
|
||||
/**
|
||||
* offset left of the canvas
|
||||
*/
|
||||
left: number;
|
||||
/**
|
||||
* new offset top of the canvas
|
||||
*/
|
||||
top: number;
|
||||
/**
|
||||
* new width of the canvas
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* new height of the canvas
|
||||
*/
|
||||
height: number;
|
||||
}
|
||||
interface ImageData {
|
||||
/**
|
||||
* the offset left of the image
|
||||
*/
|
||||
left: number;
|
||||
/**
|
||||
* the offset top of the image
|
||||
*/
|
||||
top: number;
|
||||
/**
|
||||
* the width of the image
|
||||
*/
|
||||
width: number;
|
||||
/**
|
||||
* the height of the image
|
||||
*/
|
||||
height: number;
|
||||
/**
|
||||
* the natural width of the image
|
||||
*/
|
||||
naturalWidth: number;
|
||||
/**
|
||||
* the natural height of the image
|
||||
*/
|
||||
naturalHeight: number;
|
||||
/**
|
||||
* the aspect ratio of the image
|
||||
*/
|
||||
aspectRatio: number;
|
||||
/**
|
||||
* the rotated degrees of the image if rotated
|
||||
*/
|
||||
rotate: number;
|
||||
/**
|
||||
* the scaling factor to apply on the abscissa of the image if scaled
|
||||
*/
|
||||
scaleX: number;
|
||||
/**
|
||||
* the scaling factor to apply on the ordinate of the image if scaled
|
||||
*/
|
||||
scaleY: number;
|
||||
}
|
||||
interface CroppedCanvasOptions {
|
||||
/**
|
||||
* the destination width of the output canvas
|
||||
*/
|
||||
width?: number;
|
||||
/**
|
||||
* the destination height of the output canvas
|
||||
*/
|
||||
height?: number;
|
||||
/**
|
||||
* a color to fill any alpha values in the output canvas
|
||||
*/
|
||||
fillColor?: string;
|
||||
}
|
||||
export class Cropper {
|
||||
constructor(element: HTMLImageElement, options: CropperOptions);
|
||||
/**
|
||||
* Show the crop box manually.
|
||||
*/
|
||||
crop(): void;
|
||||
|
||||
/**
|
||||
* Clear the crop box.
|
||||
*/
|
||||
reset(): void;
|
||||
|
||||
/**
|
||||
* Replace the image's src and rebuild the cropper.
|
||||
* @param url A new image url
|
||||
*/
|
||||
replace(url: string): void;
|
||||
|
||||
/**
|
||||
* Enable (unfreeze) the cropper.
|
||||
*/
|
||||
enable(): void;
|
||||
|
||||
/**
|
||||
* Disable (freeze) the cropper
|
||||
*/
|
||||
disable(): void;
|
||||
|
||||
/**
|
||||
* Destroy the cropper and remove the instance from the image.
|
||||
*/
|
||||
destroy(): void;
|
||||
|
||||
/**
|
||||
* Move the canvas (image wrapper) with relative offsets.
|
||||
* @param offsetX Moving size (px) in the horizontal direction.
|
||||
* @param offsetY Moving size (px) in the vertical direction.
|
||||
* If not present, its default value is offsetX.
|
||||
*/
|
||||
move(offsetX: number, offsetY?: number): void;
|
||||
|
||||
/**
|
||||
* Move the canvas (image wrapper) to an absolute point.
|
||||
* @param x The left value of the canvas
|
||||
* @param y The top value of the canvas
|
||||
* If not present, its default value is x.
|
||||
*/
|
||||
moveTo(x: number, y?: number): void;
|
||||
|
||||
/**
|
||||
* Zoom the canvas (image wrapper) with a relative ratio.
|
||||
* Zoom in: requires a positive number (ratio > 0)
|
||||
* Zoom out: requires a negative number (ratio < 0)
|
||||
*/
|
||||
zoom(ratio: number): void;
|
||||
|
||||
/**
|
||||
* Rotate the canvas (image wrapper) with a relative degree.
|
||||
* Rotate right: requires a positive number (degree > 0)
|
||||
* Rotate left: requires a negative number (degree < 0)
|
||||
*/
|
||||
rotate(degree: number): void;
|
||||
|
||||
/**
|
||||
* Clear the crop box.
|
||||
*/
|
||||
clear(): void;
|
||||
|
||||
/**
|
||||
* Output the cropped area position and size data (base on the original image).
|
||||
*/
|
||||
getData(rounded?: boolean): Data;
|
||||
|
||||
/**
|
||||
* Change the cropped area position and size with new data (base on the original image).
|
||||
*/
|
||||
setData(data: Data): void;
|
||||
|
||||
/**
|
||||
* Output the container size data.
|
||||
*/
|
||||
getContainerData(): ContainerData;
|
||||
|
||||
/**
|
||||
* Output the image position, size and other related data.
|
||||
*/
|
||||
getImageData(): ImageData;
|
||||
|
||||
/**
|
||||
* Output the canvas (image wrapper) position and size data.
|
||||
*/
|
||||
getCanvasData(): CanvasData & {
|
||||
/**
|
||||
* the natural width of the canvas (read only)
|
||||
*/
|
||||
naturalWidth: number;
|
||||
/**
|
||||
* the natural height of the canvas (read only)
|
||||
*/
|
||||
naturalHeight: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Change the canvas (image wrapper) position and size with new data.
|
||||
*/
|
||||
setCanvasData(data: CanvasData): void;
|
||||
|
||||
/**
|
||||
* Output the crop box position and size data.
|
||||
*/
|
||||
getCropBoxData(): CropBoxData;
|
||||
|
||||
/**
|
||||
* Change the crop box position and size with new data.
|
||||
*/
|
||||
setCropBoxData(data: CropBoxData): void;
|
||||
|
||||
/**
|
||||
* Get a canvas drawn the cropped image.
|
||||
*/
|
||||
getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement;
|
||||
|
||||
/**
|
||||
* Change the aspect ratio of the crop box.
|
||||
*/
|
||||
setAspectRatio(aspectRatio: number): void;
|
||||
|
||||
/**
|
||||
* Change the drag mode.
|
||||
*/
|
||||
setDragMode(mode?: 'none' | 'crop' | 'move'): void;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
declare module "cropperjs" {
|
||||
const Cropper: typeof cropperjs.Cropper;
|
||||
export = Cropper;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/// <reference path="../react/react.d.ts"/>
|
||||
/// <reference path="./react-cropper.d.ts"/>
|
||||
|
||||
|
||||
import * as React from 'react';
|
||||
import Cropper from 'react-cropper';
|
||||
// If you choose not to use import, you need to assign Cropper to default
|
||||
// var Cropper = require('react-cropper').default
|
||||
|
||||
class Demo extends React.Component<{}, {}> {
|
||||
crop() {
|
||||
// image in dataUrl
|
||||
console.log((this.refs['cropper'] as any).getCroppedCanvas().toDataURL());
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Cropper
|
||||
ref='cropper'
|
||||
src='http://fengyuanchen.github.io/cropper/img/picture.jpg'
|
||||
style={{ height: 400, width: '100%' }}
|
||||
// Cropper.js options
|
||||
aspectRatio={16 / 9}
|
||||
guides={false}
|
||||
crop={this.crop.bind(this) } />
|
||||
);
|
||||
}
|
||||
}
|
||||
Vendored
+153
@@ -0,0 +1,153 @@
|
||||
// Type definitions for react-cropper
|
||||
// Project: https://github.com/roadmanfong/react-cropper
|
||||
// Definitions by: Stepan Mikhaylyuk <https://github.com/stepancar>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
|
||||
/// <reference path="../react/react.d.ts"/>
|
||||
/// <reference path="../cropperjs/cropperjs.d.ts"/>
|
||||
|
||||
declare module 'react-cropper' {
|
||||
import Data = cropperjs.Data;
|
||||
import ContainerData = cropperjs.ContainerData;
|
||||
import ImageData = cropperjs.ImageData;
|
||||
import CanvasData = cropperjs.CanvasData;
|
||||
import CropBoxData = cropperjs.CropBoxData;
|
||||
import CroppedCanvasOptions = cropperjs.CroppedCanvasOptions;
|
||||
type ReactCropperProps = cropperjs.CropperOptions & __React.HTMLProps<HTMLImageElement>;
|
||||
|
||||
class ReactCropper extends __React.Component<ReactCropperProps, {}> implements cropperjs.Cropper {
|
||||
|
||||
/**
|
||||
* Show the crop box manually.
|
||||
*/
|
||||
crop(): void;
|
||||
|
||||
/**
|
||||
* Clear the crop box.
|
||||
*/
|
||||
reset(): void;
|
||||
|
||||
/**
|
||||
* Replace the image's src and rebuild the cropper.
|
||||
* @param url A new image url
|
||||
*/
|
||||
replace(url: string): void;
|
||||
|
||||
/**
|
||||
* Enable (unfreeze) the cropper.
|
||||
*/
|
||||
enable(): void;
|
||||
|
||||
/**
|
||||
* Disable (freeze) the cropper
|
||||
*/
|
||||
disable(): void;
|
||||
|
||||
/**
|
||||
* Destroy the cropper and remove the instance from the image.
|
||||
*/
|
||||
destroy(): void;
|
||||
|
||||
/**
|
||||
* Move the canvas (image wrapper) with relative offsets.
|
||||
* @param offsetX Moving size (px) in the horizontal direction.
|
||||
* @param offsetY Moving size (px) in the vertical direction.
|
||||
* If not present, its default value is offsetX.
|
||||
*/
|
||||
move(offsetX: number, offsetY?: number): void;
|
||||
|
||||
/**
|
||||
* Move the canvas (image wrapper) to an absolute point.
|
||||
* @param x The left value of the canvas
|
||||
* @param y The top value of the canvas
|
||||
* If not present, its default value is x.
|
||||
*/
|
||||
moveTo(x: number, y?: number): void;
|
||||
|
||||
/**
|
||||
* Zoom the canvas (image wrapper) with a relative ratio.
|
||||
* Zoom in: requires a positive number (ratio > 0)
|
||||
* Zoom out: requires a negative number (ratio < 0)
|
||||
*/
|
||||
zoom(ratio: number): void;
|
||||
|
||||
/**
|
||||
* Rotate the canvas (image wrapper) with a relative degree.
|
||||
* Rotate right: requires a positive number (degree > 0)
|
||||
* Rotate left: requires a negative number (degree < 0)
|
||||
*/
|
||||
rotate(degree: number): void;
|
||||
|
||||
/**
|
||||
* Clear the crop box.
|
||||
*/
|
||||
clear(): void;
|
||||
|
||||
/**
|
||||
* Output the cropped area position and size data (base on the original image).
|
||||
*/
|
||||
getData(rounded?: boolean): Data;
|
||||
|
||||
/**
|
||||
* Change the cropped area position and size with new data (base on the original image).
|
||||
*/
|
||||
setData(data: Data): void;
|
||||
|
||||
/**
|
||||
* Output the container size data.
|
||||
*/
|
||||
getContainerData(): ContainerData;
|
||||
|
||||
/**
|
||||
* Output the image position, size and other related data.
|
||||
*/
|
||||
getImageData(): ImageData;
|
||||
|
||||
/**
|
||||
* Output the canvas (image wrapper) position and size data.
|
||||
*/
|
||||
getCanvasData(): CanvasData & {
|
||||
/**
|
||||
* the natural width of the canvas (read only)
|
||||
*/
|
||||
naturalWidth: number;
|
||||
/**
|
||||
* the natural height of the canvas (read only)
|
||||
*/
|
||||
naturalHeight: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Change the canvas (image wrapper) position and size with new data.
|
||||
*/
|
||||
setCanvasData(data: CanvasData): void;
|
||||
|
||||
/**
|
||||
* Output the crop box position and size data.
|
||||
*/
|
||||
getCropBoxData(): CropBoxData;
|
||||
|
||||
/**
|
||||
* Change the crop box position and size with new data.
|
||||
*/
|
||||
setCropBoxData(data: CropBoxData): void;
|
||||
|
||||
/**
|
||||
* Get a canvas drawn the cropped image.
|
||||
*/
|
||||
getCroppedCanvas(options?: CroppedCanvasOptions): HTMLCanvasElement;
|
||||
|
||||
/**
|
||||
* Change the aspect ratio of the crop box.
|
||||
*/
|
||||
setAspectRatio(aspectRatio: number): void;
|
||||
|
||||
/**
|
||||
* Change the drag mode.
|
||||
*/
|
||||
setDragMode(mode?: 'none' | 'crop' | 'move'): void;
|
||||
|
||||
on(eventname: string, callback: () => void): void;
|
||||
}
|
||||
export default ReactCropper;
|
||||
}
|
||||
Reference in New Issue
Block a user