1.1.1 • Published 2 years ago

@epeejs/antd-img-crop v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

antd-img-crop

图片裁切工具,用于 Ant Design Upload 组件。

fork from nanxiaobei/antd-img-crop

进行了如下改动

  • beforeCrop:返回 false 时,仍然会进行文件上传
  • quality:图片质量默认值修改为 0.8
  • 新增 beforeUpload 方法,补充 beforeCrop 不能拦截上传能力
  • 不需要单独导入样式文件(已经按需加载)
  • 使用 ts 编写

现在上传流程变为 beforeUpload(Crop)-> beforeCrop(Crop)-> beforeUpload(Antd Upload),其中 beforeCrop 只控制是否裁剪,beforeUpload 返回 false 则会终止后面流程

beforeCrop 改动可以支持例如对 gif 图片不裁剪等功能

<ImgCrop beforeCrop={(file) => !file.type.includes('gif')}>
  <Upload />
</ImgCrop>

antd-img-crop 是返回 false 则不裁剪,也不会继续上传,如果需要实现原有功能,使用 antd Upload 组件的 beforeUpload 函数

安装

yarn add @epeejs/antd-img-crop

使用

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

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

Props

属性类型默认说明
aspectnumber1 / 1裁切区域宽高比,width / height
shapestring'rect'裁切区域形状,'rect''round'
gridbooleanfalse显示裁切区域网格(九宫格)
qualitynumber0.8图片质量,0 ~ 1
fillColorstring'white'裁切图像小于画布时的填充颜色
zoombooleantrue启用图片缩放
rotatebooleanfalse启用图片旋转
minZoomnumber1最小缩放倍数
maxZoomnumber3最大缩放倍数
modalTitlestring'编辑图片'弹窗标题
modalWidthnumber | string-弹窗宽度,px 的数值或百分比
modalOkstring'确定'弹窗确定按钮文字
modalCancelstring'取消'弹窗取消按钮文字
onModalOKfunction-点击弹窗确定回调
onModalCancelfunction-点击弹窗遮罩层、右上角叉、取消的回调
beforeCropfunction-弹窗打开前调用,若返回 false,弹框将不会打开,但任然会执行 ant upload 组件的上传
beforeUploadfunction-beforeCrop 调用前触发,若返回 false,将不会进行裁剪与上传操作
onUploadFailfunction-上传失败时的回调
cropperPropsobject-react-easy-crop 的 props(* 已有 props 无法重写)
1.1.1

2 years ago

1.1.0

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago