antd-img-clip

An image cropper for Ant Design Upload

Usage no npm install needed!

<script type="module">
  import antdImgClip from 'https://cdn.skypack.dev/antd-img-clip';
</script>

README

antd-img-clip

An image cropper for Ant Design Upload.

npm npm npm bundle size GitHub

English | 简体中文

Demo

Edit antd-img-clip

Install

yarn add antd-img-clip

Usage

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

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

Props

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.

License

MIT License (c) nanxiaobei