antd-img-crop，使用 Ant Design Upload 时裁切图片

时间 2019-11-17

标签 antd img crop 使用 ant design upload 裁切图片栏目 HTML 繁體版

原文原文链接

介绍

咱们常常会遇到，须要上传固定尺寸图片的场景，好比更换头像图片等。这时就须要先对图片进行裁切，Ant Desgin 默认并无提供这样的功能。git

antd-img-crop 是一个用于包装 Ant Design Upload 的组件，可实如今上传前，先对图片进行裁切，而后上传裁切后的图片。github

示例

codesandbox.io/s/4qoom5p9x…bash

安装

yarn add antd-img-crop
复制代码

使用

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

const Demo = () => (
  <ImgCrop>
    <Upload>+ Add image</Upload>
  </ImgCrop>
);
复制代码

Props

beforeCrop

类型：function，默认：-antd

图片裁切前执行，若返回 false，弹框将不会打开。（不支持 Promise）spa

Ant Design Upload 组件的 beforeUpload 属性在图片裁切后、上传前执行。code

modalTitle

类型：string，默认："编辑图片"component

弹窗标题。图片

modalWidth

类型：number，默认：520jsx

弹窗宽度。get

width

类型：number，默认：100

裁切宽度，单位 px。

height

类型：number，默认：100

裁切高度，单位 px。

resize

类型：boolean，默认：true

裁切是否可调整大小。

resizeAndDrag

类型：boolean，默认：true

裁切是否可调整大小、可拖动。