Gym-img-crop NPM

fit-img-crop

An image cropper for Ant Design Upload.

yarn add fit-img-crop

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

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

Name	Type	Default	Description
width	`number`	`100`	Crop width in `px`. If `useRatio` is `true`, it'll be ratio.
height	`number`	`100`	Crop height in `px`. If `useRatio` is `true`, it'll be ratio.
useRatio	`boolean`	`false`	If use `width` and `height` as ratio, not real `px`. And crop will fill the width or height. e.g. `width={500} height={400}` and `width={5} height={4}` are exactly the same.
resize	`boolean`	`true`	If crop can resize.
resizeAndDrag	`boolean`	`true`	If crop can resize and drag.
modalTitle	`string`	`"Edit image"`	Modal title.
modalWidth	`number`	`520`	Modal width in `px`.
beforeCrop	`function`	-	Execute before crop, if return `false`, modal will not open (Not support `Promise`). Ant Design Upload `beforeUpload` prop will execute after crop, before upload.

6 years ago

6 years ago

6 years ago