antd-cropper-img

> The best image cropper for Ant Design Upload

What is this?

This package is a React component that can show Cropperjs modal before upload image in ant design.

Table of Contents

• Installation
• Usage
• Demo
• Props
  • Cropper
  • Modal
• Creator
• License

Installation

You can install this package in two ways simultaneously

install with npm

npm install antd-cropper-img

install with yarn

yarn add antd-cropper-img

Usage

import { Upload } from 'antd';
import CropperImage from 'antd-cropper-img';

const App = () => (
        
          + Add image
        
)

Demo

Props

props are divided into two groups, CropperProps and ModalProps

Cropper

dragMode

• Type: String
• Default: 'crop'
• Options:
  • 'crop': create a new crop box
  • 'move': move the canvas
  • 'none': do nothing

Define the dragging mode of the cropper.

initialAspectRatio

• Type: Number
• Default: NaN

Define the initial aspect ratio of the crop box. By default, it is the same as the aspect ratio of the canvas (image wrapper).

> Only available when the aspect option is set to NaN.

aspect

• Type: Number
• Default: NaN

Define the fixed aspect ratio of the crop box. By default, the crop box has a free ratio.

initialCrop

• Type: initialCropProps
• Default: null

initialize cropper image

checkCrossOrigin

• Type: Boolean
• Default: true

Check if the current image is a cross-origin image.

If so, a crossOrigin attribute will be added to the cloned image element, and a timestamp parameter will be added to the src attribute to reload the source image to avoid browser cache error.

Adding a crossOrigin attribute to the image element will stop adding a timestamp to the image URL and stop reloading the image. But the request (XMLHttpRequest) to read the image data for orientation checking will require a timestamp to bust the cache to avoid browser cache error. You can set the checkOrientation option to false to cancel this request.

guides

• Type: Boolean
• Default: true

Show the dashed lines above the crop box.

center

• Type: Boolean
• Default: true

Show the center indicator above the crop box.

movable

• Type: Boolean
• Default: true

Enable to move the image.

restore

• Type: Boolean
• Default: true

Restore the cropped area after resizing the window.

rotatable

• Type: Boolean
• Default: true

Enable to rotate the image.

scalable

• Type: Boolean
• Default: true

Enable to scale the image.

zoomable

• Type: Boolean
• Default: true

Enable to zoom the image.

zoomAmount

• Type: Number
• Default: 1

Amount to zoom on button click.

zoomStep

• Type: Number
• Default: 0.3

Amount to step on zoom slider.

zoomOnTouch

• Type: Boolean
• Default: true

Enable to zoom the image by dragging touch.

zoomOnWheel

• Type: Boolean
• Default: true

Enable to zoom the image by mouse wheeling.

wheelZoomRatio

• Type: Number
• Default: 0.1

Define zoom ratio when zooming the image by mouse wheeling.

cropBoxMovable

• Type: Boolean
• Default: true

Enable to move the crop box by dragging.

minZoom

• Type: Number
• Default: 0

Minimum zoom factor.

maxZoom

• Type: Number
• Default: 3

Maximum zoom factor.

cropBoxResizable

• Type: Boolean
• Default: true

Enable to resize the crop box by dragging.

toggleDragModeOnDblclick

• Type: Boolean
• Default: true

Enable to toggle drag mode between "crop" and "move" when clicking twice on the cropper.

> Requires dblclick event support.

minContainerWidth

• Type: Number
• Default: 200

The minimum width of the container.

minContainerHeight

• Type: Number
• Default: 100

The minimum height of the container.

minCanvasWidth

• Type: Number
• Default: 0

The minimum width of the canvas (image wrapper).

minCanvasHeight

• Type: Number
• Default: 0

The minimum height of the canvas (image wrapper).

minCropBoxWidth

• Type: Number
• Default: 0

The minimum width of the crop box.

Note: This size is relative to the page, not the image.

minCropBoxHeight

• Type: Number
• Default: 0

The minimum height of the crop box.

Note: This size is relative to the page, not the image.

---

Modal

modalTitle

• Type: String
• Default: 'Edit image'

Title of modal.

modalWidth

• Type: Number | String
• Default: 520

Width of modal in pixels number or percentages.

okText

• Type: String
• Default: 'OK'

Text of modal confirm button.

cancelText

• Type: String
• Default: 'Cancel'

Text of modal cancel button.

closable

• Type: Boolean
• Default: true

Whether a close (x) button is visible on top right of the modal dialog or not.

closeIcon

• Type: ReactNode
• Default: undefined

Custom close icon.

hasMask

• Type: Boolean
• Default: true

Whether show mask or not.

maskTransitionName

• Type: String
• Default: 'fade'

MaskTransitionName of modal, use 'none' to disable the default transition effect.

modalTransitionName

• Type: String
• Default: 'fade'

TransitionName of modal, use 'none' to disable the default transition effect.

rootClassName

• Type: String
• Default: -

The class name of the container of the modal dialog.

classNames

• Type: header?: string; body?: string; footer?: string; mask?: string; wrapper?: string;
• Default: -

Config Modal build-in module's className.

onModalOk

• Type: function
• Default: -

Call when click modal confirm button.

afterCloseModal

• Type: function
• Default: -

Specify a function that will be called when modal is closed completely.

onModalCancel

• Type: function
• Default: -

Call when click modal mask, top right "x", or cancel button.

afterCloseModal

• Type: function
• Default: -

Specify a function that will be called when modal is closed completely.

zIndex

• Type: Number
• Default: 1000

The z-index of the Modal.

modalStyles

• Type: header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties;
• Default: -

Config Modal build-in module's style.

okType

• Type: string
• Default: primary

Button type of the OK button.

cancelButtonProps

• Type: ButtonProps
• Default: -

The cancel button props.

okButtonProps

• Type: ButtonProps
• Default: -

The ok button props.

confirmLoading

• Type: boolean
• Default: false

Whether to apply loading visual effect for OK button or not.

focusTriggerAfterClose

• Type: boolean
• Default: true

Whether need to focus trigger element after dialog is closed.

getContainer

• Type: HTMLElement | () => HTMLElement | Selectors | false
• Default: document.body

The mounted node for Modal but still display at fullscreen.

footer

• Type: (params:footerRenderParams)=> React.ReactNode | React.ReactNode
• Default: (OK and Cancel buttons)

Footer content, set as footer={null} when you don't need default buttons.

beforeCrop

• Type: function
• Default: -

Call before modal open, if return false, it'll not open.

onUploadFail

• Type: function
• Default: -

Call when upload failed.

Creator

Sina Shah Oveisi @sinashahoveisi

> I love programming. I am interested in popular frameworks or programming languages and I am currently coding with JavaScript and React framework.

License

MIT License © Sina Shahoveisi