nanxiaobei / Antd Img Crop
Licence: mit
🔪 An image cropper for Ant Design Upload
Stars: ✭ 207
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Antd Img Crop
tiny-qiniu-request
tiny-qiniu for rc-upload or antd upload component `customRequest` property
Stars: ✭ 13 (-93.72%)
Mutual labels: upload, antd, ant-design
React Files
A file input (dropzone) management component for React
Stars: ✭ 126 (-39.13%)
Mutual labels: image, upload
Fc Angular
快速搭建angular后台管理系统的admin template。Fast development platform based on angular8, ng.ant.design built multi-tab page background management system (continuous upgrade) ^_^
Stars: ✭ 171 (-17.39%)
Mutual labels: antd, ant-design
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-55.56%)
Mutual labels: image, upload
React Antd Admin
用React和Ant Design搭建的一个通用管理后台
Stars: ✭ 1,313 (+534.3%)
Mutual labels: antd, ant-design
Vuepress Theme Antdocs
🔥🎨 An Ant Design style theme for VuePress. (QQ Group: 867711329)
Stars: ✭ 147 (-28.99%)
Mutual labels: antd, ant-design
Ant Design Mobile
Fluent and powerful mobile component library based on React.
Stars: ✭ 9,489 (+4484.06%)
Mutual labels: antd, ant-design
Abp React Antd
一个基于 ABP + React + Ant Design Pro 的快速开发框架
Stars: ✭ 175 (-15.46%)
Mutual labels: antd, ant-design
React Ui Roundup
A one-stop-shop for comparing the features of all the best React frameworks. Useful for designers and engineers alike!
Stars: ✭ 177 (-14.49%)
Mutual labels: antd, ant-design
Uploadcare Widget
Uploadcare Widget, an ultimate tool for HTML5 file upload supporting multiple file upload, drag&drop, validation by file size/file extension/MIME file type, progress bar for file uploads, image preview.
Stars: ✭ 183 (-11.59%)
Mutual labels: image, upload
Spring Security React Ant Design Polls App
Full Stack Polls App built using Spring Boot, Spring Security, JWT, React, and Ant Design
Stars: ✭ 1,336 (+545.41%)
Mutual labels: antd, ant-design
Ant Design Pro Plus
✨ 基于 ant-design-pro 做一些微小的工作。
Stars: ✭ 88 (-57.49%)
Mutual labels: antd, ant-design
Antd Schema Form
Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design，可以通过JSON Schema配置生成可交互的表单。
Stars: ✭ 137 (-33.82%)
Mutual labels: antd, ant-design
Cropiwa
📐 Configurable Custom Crop widget for Android
Stars: ✭ 2,185 (+955.56%)
Mutual labels: image, image-cropper
React Antd Multi Tabs Admin
ts+react+antd-多页签后台模板(纯净版，非 antd pro！)
Stars: ✭ 73 (-64.73%)
Mutual labels: antd, ant-design
React Images Uploading
The simple images uploader applied Render Props pattern that allows you to fully control UI component and behaviors.
Stars: ✭ 80 (-61.35%)
Mutual labels: image, upload
Dynamic Antd Theme
🌈 A simple plugin to dynamic change ant-design theme whether less or css.
Stars: ✭ 174 (-15.94%)
Mutual labels: antd, ant-design
antd-img-crop
An image cropper for Ant Design Upload.
English | 简体中文
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) |
| quality | number |
0.4 |
Image quality, 0 ~ 1
|
| fillColor | string |
white |
Fill color when cropped image smaller than canvas |
| zoom | boolean |
true |
Enable zoom for image |
| rotate | boolean |
false |
Enable rotate for image |
| minZoom | number |
1 |
Minimum zoom factor |
| maxZoom | number |
3 |
Maximum zoom factor |
| modalTitle | string |
'Edit image' |
Title of modal |
| modalWidth |
number | string
|
520 |
Width of modal in pixels number or percentages |
| modalOk | string |
'OK' |
Text of confirm button of modal |
| modalCancel | string |
'Cancel' |
Text of cancel button of modal |
| beforeCrop | function |
- | Call before modal open, if return false, it'll not open |
| cropperProps | object |
- | Props of react-easy-crop (* existing props cannot be overridden) |
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].