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

Interfaces

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 {}

                                                                                                                                                                                                                  property x1

                                                                                                                                                                                                                  x1: number;

                                                                                                                                                                                                                    property x2

                                                                                                                                                                                                                    x2: number;

                                                                                                                                                                                                                      property y1

                                                                                                                                                                                                                      y1: number;

                                                                                                                                                                                                                        property y2

                                                                                                                                                                                                                        y2: number;

                                                                                                                                                                                                                          interface Dimensions

                                                                                                                                                                                                                          interface Dimensions {}

                                                                                                                                                                                                                            property height

                                                                                                                                                                                                                            height: number;

                                                                                                                                                                                                                              property width

                                                                                                                                                                                                                              width: number;

                                                                                                                                                                                                                                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 MoveStart

                                                                                                                                                                                                                                                                          interface MoveStart {}

                                                                                                                                                                                                                                                                            property clientX

                                                                                                                                                                                                                                                                            clientX: number;

                                                                                                                                                                                                                                                                              property clientY

                                                                                                                                                                                                                                                                              clientY: number;

                                                                                                                                                                                                                                                                                property cropper

                                                                                                                                                                                                                                                                                cropper: CropperPosition;

                                                                                                                                                                                                                                                                                  property position

                                                                                                                                                                                                                                                                                  position: Position | null;

                                                                                                                                                                                                                                                                                    property transform

                                                                                                                                                                                                                                                                                    transform?: ImageTransform;

                                                                                                                                                                                                                                                                                      property type

                                                                                                                                                                                                                                                                                      type: MoveTypes | null;

                                                                                                                                                                                                                                                                                        Type Aliases

                                                                                                                                                                                                                                                                                        type OutputFormat

                                                                                                                                                                                                                                                                                        type OutputFormat = 'png' | 'jpeg' | 'bmp' | 'webp' | 'ico';

                                                                                                                                                                                                                                                                                          Package Files (13)

                                                                                                                                                                                                                                                                                          Dependencies (1)

                                                                                                                                                                                                                                                                                          Dev Dependencies (0)

                                                                                                                                                                                                                                                                                          No dev dependencies.

                                                                                                                                                                                                                                                                                          Peer Dependencies (2)

                                                                                                                                                                                                                                                                                          Badge

                                                                                                                                                                                                                                                                                          To add a badge like this onejsDocs.io badgeto 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>