4.9.93 • Published 3 months ago
bright-image-crop v4.9.93
antd-img-crop
图片裁切工具,用于 Ant Design Upload 组件
English | 简体中文
示例
安装
yarn add antd-img-crop
# npm install antd-img-crop
使用
import ImgCrop from 'antd-img-crop';
import { Upload } from 'antd';
const Demo = () => (
<ImgCrop>
<Upload>+ Add image</Upload>
</ImgCrop>
);
Props
属性 | 类型 | 默认 | 说明 |
---|---|---|---|
aspect | number | 1 / 1 | 裁切区域宽高比,width / height |
shape | string | 'rect' | 裁切区域形状,'rect' 或 'round' |
grid | boolean | false | 显示裁切区域网格(九宫格) |
quality | number | 0.4 | 图片质量,0 ~ 1 |
fillColor | string | 'white' | 裁切图像小于画布时的填充颜色 |
zoom | boolean | true | 启用图片缩放 |
rotate | boolean | false | 启用图片旋转 |
minZoom | number | 1 | 最小缩放倍数 |
maxZoom | number | 3 | 最大缩放倍数 |
modalTitle | string | '编辑图片' | 弹窗标题 |
modalWidth | number | string | 520 | 弹窗宽度,px 的数值或百分比 |
modalOk | string | '确定' | 弹窗确定按钮文字 |
modalCancel | string | '取消' | 弹窗取消按钮文字 |
onModalOK | function | - | 点击弹窗确定回调 |
onModalCancel | function | - | 点击弹窗遮罩层、右上角叉、取消的回调 |
beforeCrop | function | - | 弹窗打开前调用,若返回 false ,弹框将不会打开 |
onUploadFail | function | - | 上传失败时的回调 |
cropperProps | object | - | react-easy-crop 的 props(* 已有 props 无法重写) |
样式
为防止覆盖 antd
自定义样式,antd-img-crop
没有引入组件样式。
因此,若项目配置了 babel-plugin-import
且未使用 Modal
或 Slider
,请手动引入样式:
import 'antd/es/modal/style';
import 'antd/es/slider/style';
FAQ
ConfigProvider 未生效?
若使用 craco-antd
,请在 craco.config.js
中添加 libraryDirectory: 'es'
:
module.exports = {
plugins: [
{
plugin: CracoAntDesignPlugin,
options: {
// 其它配置...
+ babelPluginImportOptions: {
+ libraryDirectory: 'es',
+ },
},
},
],
};
若手动配置 babel-plugin-import
,请在 .babelrc.js
中设置 libraryDirectory: 'es'
:
module.exports = {
plugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
};
协议
FUTAKE
试试 FUTAKE 小程序,你的灵感相册。🌈