ngx-image-cropper
- Version 9.1.5
- Published
- 546 kB
- 1 dependency
- MIT license
Install
npm i ngx-image-cropperyarn add ngx-image-cropperpnpm add ngx-image-cropperOverview
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: { (input: CropInput, output: 'blob'): Promise<ImageCroppedEvent> | null; (input: CropInput, output: 'base64'): ImageCroppedEvent;};method getQuality
getQuality: (options?: { imageQuality?: number }) => number;method getResizeRatio
getResizeRatio: ( width: number, height: number, options?: { resizeToWidth?: number; resizeToHeight?: number; onlyScaleDown?: boolean; }) => 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, options: LoadImageOptions) => Promise<LoadedImage>;method loadImageFile
loadImageFile: (file: File, options: LoadImageOptions) => Promise<LoadedImage>;method loadImageFromURL
loadImageFromURL: ( url: string, options: LoadImageOptions) => Promise<LoadedImage>;method transformLoadedImage
transformLoadedImage: ( loadedImage: Partial<LoadedImage>, options: LoadImageOptions, forceTransform?: boolean) => Promise<LoadedImage>;Interfaces
interface CropInput
interface CropInput {}property cropper
cropper: CropperPosition;property loadedImage
loadedImage: LoadedImage;property maxSize
maxSize: Dimensions;property options
options?: { backgroundColor?: string; containWithinAspectRatio?: boolean; maintainAspectRatio?: boolean; aspectRatio?: number; format?: OutputFormat; canvasRotation?: number; imageQuality?: number; resizeToWidth?: number; resizeToHeight?: number; onlyScaleDown?: boolean;};property transform
transform?: ImageTransform;interface CropperOptions
interface CropperOptions {}property alignImage
alignImage: 'left' | 'center';property aspectRatio
aspectRatio: number;property autoCrop
autoCrop: boolean;property backgroundColor
backgroundColor: string | undefined;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;};interface LoadImageOptions
interface LoadImageOptions {}property aspectRatio
aspectRatio?: number;property canvasRotation
canvasRotation?: number;property checkImageType
checkImageType?: boolean;property containWithinAspectRatio
containWithinAspectRatio?: boolean;property format
format?: OutputFormat;Type Aliases
type OutputFormat
type OutputFormat = 'png' | 'jpeg' | 'bmp' | 'webp' | 'ico';Package Files (15)
- index.d.ts
- lib/component/image-cropper.component.d.ts
- lib/interfaces/crop-input.interface.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/load-image-options.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[](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 4806 ms. - Missing or incorrect documentation? Open an issue for this package.
