JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q40357F
  • License MIT

An image cropper for Ant Design Upload

Package Exports

  • aiz-img-crop

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aiz-img-crop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

antd-img-crop

An image cropper for Ant Design Upload.

npm npm npm bundle size GitHub

English | 简体中文

Demo

Live demo

Install

yarn add antd-img-crop

Usage

import ImgCrop from 'antd-img-crop';
import { Upload } from 'antd';

const Demo = () => (
  <ImgCrop>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);

Props

Prop Type Default Description
aspect number 1 / 1 Aspect of crop area , width / height
shape string 'rect' Shape of crop area, 'rect' or 'round'
grid boolean false Show grid of crop area (third-lines)
zoom boolean true Enable zoom for image
rotate boolean false Enable rotate for image
beforeCrop function - Called before modal open, if return false, it'll not open
modalTitle string 'Edit image' Title of modal
modalWidth number | string 520 Width of modal in pixels or percentages
modalOk string 'OK' Text of confirm button of modal
modalCancel string 'Cancel' Text of cancel button of modal

Styles

To prevent overwriting the custom styles to antd, antd-img-crop does not import the style files of components.

Therefore, if your project configured babel-plugin-import, and not use Modal or Slider, you need to import the styles yourself:

import 'antd/es/modal/style';
import 'antd/es/slider/style';

License

MIT License (c) nanxiaobei