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 = () => (
        <CropperImage>
          <Upload>+ Add image</Upload>
        </CropperImage>
)

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