ngx-image-cropper
- Version 9.1.1
- Published
- 541 kB
- 1 dependency
- MIT license
Install
npm i ngx-image-cropper
yarn add ngx-image-cropper
pnpm add ngx-image-cropper
Overview
An image cropper for Angular
Index
Functions
Classes
ImageCropperComponent
- alignImage
- alignImageStyle
- allowMoveImage
- aspectRatio
- autoCrop
- backgroundColor
- canvasRotation
- checkImageType
- containWithinAspectRatio
- crop()
- cropper
- cropperChange
- cropperFrameAriaLabel
- cropperMaxHeight
- cropperMaxWidth
- cropperMinHeight
- cropperMinWidth
- cropperReady
- cropperStaticHeight
- cropperStaticWidth
- disabled
- format
- hidden
- hideResizeSquares
- imageAltText
- imageBase64
- imageChangedEvent
- imageCropped
- imageFile
- imageLoaded
- imageLoadedInView()
- imageQuality
- imageURL
- imageVisible
- initialStepSize
- keyboardAccess()
- loadImageError()
- loadImageFailed
- maintainAspectRatio
- marginLeft
- moveTypes
- ngOnChanges()
- ngOnDestroy()
- ngOnInit()
- onlyScaleDown
- onResize()
- options
- output
- ɵcmp
- ɵfac
- resetCropOnAspectRatioChange
- resetCropperPosition()
- resizeToHeight
- resizeToWidth
- roundCropper
- safeImgDataUrl
- safeTransformStyle
- sourceImage
- startCropImage
- startMove()
- startPinch()
- state
- transform
- transformChange
- wrapper
Interfaces
CropperOptions
- alignImage
- aspectRatio
- autoCrop
- backgroundColor
- canvasRotation
- checkImageType
- containWithinAspectRatio
- cropperFrameAriaLabel
- cropperMaxHeight
- cropperMaxWidth
- cropperMinHeight
- cropperMinWidth
- cropperStaticHeight
- cropperStaticWidth
- format
- hideResizeSquares
- imageQuality
- maintainAspectRatio
- onlyScaleDown
- output
- resetCropOnAspectRatioChange
- resizeToHeight
- resizeToWidth
- roundCropper
Type Aliases
Functions
function base64ToFile
base64ToFile: (base64Image: string) => Blob;
function resizeCanvas
resizeCanvas: (canvas: HTMLCanvasElement, width: number, height: number) => void;
Classes
class CropService
class CropService {}
method crop
crop: { ( cropperState: CropperState, output: 'blob' ): Promise<ImageCroppedEvent> | null; (cropperState: CropperState, output: 'base64'): ImageCroppedEvent;};
method getQuality
getQuality: (options: CropperOptions) => number;
method getResizeRatio
getResizeRatio: ( width: number, height: number, options: CropperOptions) => number;
class ImageCropperComponent
class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {}
constructor
constructor(sanitizer: DomSanitizer);
property alignImage
alignImage?: 'left' | 'center';
property alignImageStyle
readonly alignImageStyle: 'left' | 'center';
property allowMoveImage
allowMoveImage: boolean;
property aspectRatio
aspectRatio?: number;
property autoCrop
autoCrop?: boolean;
property backgroundColor
backgroundColor?: string;
property canvasRotation
canvasRotation?: number;
property checkImageType
checkImageType: boolean;
property containWithinAspectRatio
containWithinAspectRatio?: boolean;
property cropper
cropper?: CropperPosition;
property cropperChange
readonly cropperChange: any;
property cropperFrameAriaLabel
cropperFrameAriaLabel?: string;
property cropperMaxHeight
cropperMaxHeight?: number;
property cropperMaxWidth
cropperMaxWidth?: number;
property cropperMinHeight
cropperMinHeight?: number;
property cropperMinWidth
cropperMinWidth?: number;
property cropperReady
readonly cropperReady: any;
property cropperStaticHeight
cropperStaticHeight?: number;
property cropperStaticWidth
cropperStaticWidth?: number;
property disabled
disabled: boolean;
property format
format?: OutputFormat;
property hidden
hidden: boolean;
property hideResizeSquares
hideResizeSquares?: boolean;
property imageAltText
imageAltText?: string;
property imageBase64
imageBase64?: string;
property imageChangedEvent
imageChangedEvent?: Event;
property imageCropped
readonly imageCropped: any;
property imageFile
imageFile?: File;
property imageLoaded
readonly imageLoaded: any;
property imageQuality
imageQuality?: number;
property imageURL
imageURL?: string;
property imageVisible
imageVisible: boolean;
property initialStepSize
initialStepSize?: number;
property loadImageFailed
readonly loadImageFailed: any;
property maintainAspectRatio
maintainAspectRatio?: boolean;
property marginLeft
marginLeft: any;
property moveTypes
protected readonly moveTypes: typeof MoveTypes;
property onlyScaleDown
onlyScaleDown?: boolean;
property options
options?: Partial<CropperOptions>;
property output
output?: 'blob' | 'base64';
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< ImageCropperComponent, 'image-cropper', never, { imageChangedEvent: { alias: 'imageChangedEvent'; required: false }; imageURL: { alias: 'imageURL'; required: false }; imageBase64: { alias: 'imageBase64'; required: false }; imageFile: { alias: 'imageFile'; required: false }; imageAltText: { alias: 'imageAltText'; required: false }; options: { alias: 'options'; required: false }; cropperFrameAriaLabel: { alias: 'cropperFrameAriaLabel'; required: false; }; output: { alias: 'output'; required: false }; format: { alias: 'format'; required: false }; autoCrop: { alias: 'autoCrop'; required: false }; cropper: { alias: 'cropper'; required: false }; transform: { alias: 'transform'; required: false }; maintainAspectRatio: { alias: 'maintainAspectRatio'; required: false }; aspectRatio: { alias: 'aspectRatio'; required: false }; resetCropOnAspectRatioChange: { alias: 'resetCropOnAspectRatioChange'; required: false; }; resizeToWidth: { alias: 'resizeToWidth'; required: false }; resizeToHeight: { alias: 'resizeToHeight'; required: false }; cropperMinWidth: { alias: 'cropperMinWidth'; required: false }; cropperMinHeight: { alias: 'cropperMinHeight'; required: false }; cropperMaxHeight: { alias: 'cropperMaxHeight'; required: false }; cropperMaxWidth: { alias: 'cropperMaxWidth'; required: false }; cropperStaticWidth: { alias: 'cropperStaticWidth'; required: false }; cropperStaticHeight: { alias: 'cropperStaticHeight'; required: false }; canvasRotation: { alias: 'canvasRotation'; required: false }; initialStepSize: { alias: 'initialStepSize'; required: false }; roundCropper: { alias: 'roundCropper'; required: false }; onlyScaleDown: { alias: 'onlyScaleDown'; required: false }; imageQuality: { alias: 'imageQuality'; required: false }; backgroundColor: { alias: 'backgroundColor'; required: false }; containWithinAspectRatio: { alias: 'containWithinAspectRatio'; required: false; }; hideResizeSquares: { alias: 'hideResizeSquares'; required: false }; allowMoveImage: { alias: 'allowMoveImage'; required: false }; checkImageType: { alias: 'checkImageType'; required: false }; alignImage: { alias: 'alignImage'; required: false }; disabled: { alias: 'disabled'; required: false }; hidden: { alias: 'hidden'; required: false }; }, { imageCropped: 'imageCropped'; startCropImage: 'startCropImage'; imageLoaded: 'imageLoaded'; cropperReady: 'cropperReady'; loadImageFailed: 'loadImageFailed'; transformChange: 'transformChange'; cropperChange: 'cropperChange'; }, never, never, true, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration<ImageCropperComponent, never>;
property resetCropOnAspectRatioChange
resetCropOnAspectRatioChange?: boolean;
property resizeToHeight
resizeToHeight?: number;
property resizeToWidth
resizeToWidth?: number;
property roundCropper
roundCropper?: boolean;
property safeImgDataUrl
readonly safeImgDataUrl: any;
property safeTransformStyle
readonly safeTransformStyle: any;
property sourceImage
sourceImage: ElementRef<HTMLDivElement>;
property startCropImage
readonly startCropImage: any;
property state
protected readonly state: CropperState;
property transform
transform?: ImageTransform;
property transformChange
readonly transformChange: any;
property wrapper
wrapper: ElementRef<HTMLDivElement>;
method crop
crop: { (): ImageCroppedEvent | null; (output: 'base64'): ImageCroppedEvent; (output: 'blob'): Promise<ImageCroppedEvent>;};
method imageLoadedInView
imageLoadedInView: () => void;
method keyboardAccess
keyboardAccess: (event: KeyboardEvent) => void;
method loadImageError
loadImageError: (error: unknown) => void;
method ngOnChanges
ngOnChanges: (changes: SimpleChanges) => void;
method ngOnDestroy
ngOnDestroy: () => void;
method ngOnInit
ngOnInit: () => void;
method onResize
onResize: () => void;
method resetCropperPosition
resetCropperPosition: () => void;
method startMove
startMove: ( event: Event | BasicEvent, moveType: MoveTypes, position?: Position | null) => void;
method startPinch
startPinch: (event: TouchEvent) => void;
class LoadImageService
class LoadImageService {}
method loadBase64Image
loadBase64Image: ( imageBase64: string, cropperSettings: CropperState) => Promise<LoadedImage>;
method loadImageFile
loadImageFile: ( file: File, cropperSettings: CropperState) => Promise<LoadedImage>;
method loadImageFromURL
loadImageFromURL: ( url: string, cropperSettings: CropperState) => Promise<LoadedImage>;
method transformLoadedImage
transformLoadedImage: ( loadedImage: Partial<LoadedImage>, cropperState: CropperState, forceTransform?: boolean) => Promise<LoadedImage>;
Interfaces
interface CropperOptions
interface CropperOptions {}
property alignImage
alignImage: 'left' | 'center';
property aspectRatio
aspectRatio: number;
property autoCrop
autoCrop: boolean;
property backgroundColor
backgroundColor: string | null;
property canvasRotation
canvasRotation: number;
property checkImageType
checkImageType: boolean;
property containWithinAspectRatio
containWithinAspectRatio: boolean;
property cropperFrameAriaLabel
cropperFrameAriaLabel: string | undefined;
property cropperMaxHeight
cropperMaxHeight: number;
property cropperMaxWidth
cropperMaxWidth: number;
property cropperMinHeight
cropperMinHeight: number;
property cropperMinWidth
cropperMinWidth: number;
property cropperStaticHeight
cropperStaticHeight: number;
property cropperStaticWidth
cropperStaticWidth: number;
property format
format: OutputFormat;
property hideResizeSquares
hideResizeSquares: boolean;
property imageQuality
imageQuality: number;
property maintainAspectRatio
maintainAspectRatio: boolean;
property onlyScaleDown
onlyScaleDown: boolean;
property output
output: OutputType;
property resetCropOnAspectRatioChange
resetCropOnAspectRatioChange: boolean;
property resizeToHeight
resizeToHeight: number;
property resizeToWidth
resizeToWidth: number;
property roundCropper
roundCropper: boolean;
interface CropperPosition
interface CropperPosition {}
interface Dimensions
interface Dimensions {}
interface ImageCroppedEvent
interface ImageCroppedEvent {}
property base64
base64?: string | null;
property blob
blob?: Blob | null;
property cropperPosition
cropperPosition: CropperPosition;
property height
height: number;
property imagePosition
imagePosition: CropperPosition;
property objectUrl
objectUrl?: string | null;
property offsetImagePosition
offsetImagePosition?: CropperPosition;
property width
width: number;
interface ImageTransform
interface ImageTransform {}
property flipH
flipH?: boolean;
property flipV
flipV?: boolean;
property rotate
rotate?: number;
property scale
scale?: number;
property translateH
translateH?: number;
property translateUnit
translateUnit?: '%' | 'px';
property translateV
translateV?: number;
interface LoadedImage
interface LoadedImage {}
property exifTransform
exifTransform: ExifTransform;
property original
original: { objectUrl: string; image: HTMLImageElement; size: Dimensions;};
property transformed
transformed: { objectUrl: string; image: HTMLImageElement; size: Dimensions;};
Type Aliases
type OutputFormat
type OutputFormat = 'png' | 'jpeg' | 'bmp' | 'webp' | 'ico';
Package Files (13)
- index.d.ts
- lib/component/image-cropper.component.d.ts
- lib/interfaces/cropper-options.interface.d.ts
- lib/interfaces/cropper-position.interface.d.ts
- lib/interfaces/dimensions.interface.d.ts
- lib/interfaces/image-cropped-event.interface.d.ts
- lib/interfaces/image-transform.interface.d.ts
- lib/interfaces/loaded-image.interface.d.ts
- lib/interfaces/move-start.interface.d.ts
- lib/services/crop.service.d.ts
- lib/services/load-image.service.d.ts
- lib/utils/blob.utils.d.ts
- lib/utils/resize.utils.d.ts
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-image-cropper
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-image-cropper)
- HTML<a href="https://www.jsdocs.io/package/ngx-image-cropper"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4315 ms. - Missing or incorrect documentation? Open an issue for this package.