nanxiaobei / antd-img-crop

🗡 An image cropper for Ant Design Upload

Link in bio to widgets, your online home screen. ➫ 🔗 kee.so

---

antd-img-crop

An image cropper for Ant Design Upload

English | 简体中文

Install

pnpm add antd-img-crop
# or
yarn add antd-img-crop
# or
npm i antd-img-crop

Usage

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

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

Props

Prop	Type	Default	Description
quality	number	0.4	Cropped image quality, 0 to 1
fillColor	string	'white'	Fill color for cropped image
zoomSlider	boolean	true	Enable zoom adjustment
rotationSlider	boolean	false	Enable rotation adjustment
aspectSlider	boolean	false	Enable aspect adjustment
showReset	boolean	false	Show reset button to reset zoom rotation aspect
resetText	string	Reset	Reset button text
aspect	number	1 / 1	Aspect of crop area , width / height
minZoom	number	1	Minimum zoom factor
maxZoom	number	3	Maximum zoom factor
cropShape	string	'rect'	Shape of crop area, 'rect' or 'round'
showGrid	boolean	false	Show grid of crop area (third-lines)
cropperProps	object	-	react-easy-crop props (* existing props cannot be overridden)
modalClassName	string	''	Modal classname
modalTitle	string	'Edit image'	Modal title
modalWidth	number	string	Modal width
modalOk	string		Ok button text
modalCancel	string		Cancel button text
onModalOk	function	-	Callback of click ok button
onModalCancel	function	-	Callback of click cancel button (or modal mask & top right "x")
modalProps	object		Ant Design Modal props (* existing props cannot be overridden)
beforeCrop	function	-	Callback before crop modal, if return false or reject(), modal will not open

FAQ

ConfigProvider not work?

Try to set libraryDirectory('es' or 'lib') to babel-plugin-import config, see which one will work.

module.exports = {
  plugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ],
};

No style? (only antd<=v4)

If you use antd<=v4 + babel-plugin-import, and no Modal or Slider were imported, please import these styles manually:

import 'antd/es/modal/style';
import 'antd/es/slider/style';

License

MIT License (c) nanxiaobei

antd-img-crop's Issues

import "index.less" 文件解析错误

nextjs 中不会解析node_modules中的less文件，导致报错
建议：

1. 实现 babel-plugin-import 支持
2. 源码中不显示 import "index.less"，由用户手动引用

为什么裁剪的都是图片右上角部分，而且宽高不是设定的宽高，看demo也是这样

为什么裁剪的都是图片右上角部分，而且宽高不是设定的宽高，看demo也是这样

Uncaught (in promise) Error: Cannot find module 'antd/es/modal/style' at dist lazy ^.*$ namespace object:26

Uncaught (in promise) Error: Cannot find module 'antd/es/modal/style'
at dist lazy ^.*$ namespace object:26

Contain props not working in mobile

Working like a charm on desktop, but contain is not working on mobile devices.

<ImgCrop width={350} height={200} contain={true}>
          <Upload
            action="https://www.、/v2/5cc8019d300000980a055e76"
            listType="picture-card"
            fileList={fileList}
            onPreview={this.onPreview}
            onChange={this.onChange}
          >
            {fileList.length < 3 && "+ Upload"}
          </Upload>
</ImgCrop>
<Modal visible={previewShow} onCancel={this.onCancel} footer={null}>
<img src={previewSrc} style={{ maxWidth: "100%" }} alt="preview" />
</Modal>

剪裁后的图片特别模糊，请问要如何解决？

剪裁后的图片特别模糊，100KB的图片剪裁后只有20KB（尺寸没变），请问要如何解决？

ie10裁剪框不能拖拽

Extra functionality from `react-image-crop` and modal customization

Is there a way to use the underlying properties of the react-image-crop such as minHeight, minWidth, etc. since this package depends on it? Also, is there a way to customize the Modal component that shows up when cropping (changing the buttons and footer, for example)?
Thank you!

antd CI failed with `antd-img-crop`

ref:
https://app.circleci.com/pipelines/github/ant-design/ant-design/14308/workflows/83237611-0226-48cc-8e57-2934802fcce6/jobs/206179/steps

Importing 'antd-img-crop' overriding existing CSS.

Hi,
Need help! I am currently using the plugin and facing an issue, that whenever I import the plugin, It overrides my existing CSS. Any idea why this is happening?

Adding below line of code is creating the issue:
"import ImgCrop from 'antd-img-crop';"

Thanks.

控制上传文件大小问题

裁剪之前没有暴露api，无法控制文件过大取消裁剪的操作

不支持选区长宽分别调整吗？

如题，只能是按比例吗？

build error with the last version 3.4.2

I am sorry, I have another problem :(

With crop 3.3.0 my build was fine, but with the new version 3.4.2 I got this error

I try many many times install and unistall different version of another packages like nextjs or antd (because I thought is a problem of the new versions of nextjs or antd, but the problem just occurs when I update antd-img-crop to 3.4.2

This is my stable dependencies version. If I update crop the build crashes :(

"dependencies": {
        "@next/bundle-analyzer": "^9.4.4",
        "@reduxjs/toolkit": "^1.3.6",
        "@zeit/next-less": "^1.0.1",
        "antd": "^4.3.3",
        "antd-img-crop": "^3.3.0",
        "isomorphic-unfetch": "^3.0.0",
        "next": "^9.4.4",
        "next-antd-aza-less": "^1.0.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-redux": "^7.2.0"
    }

Multiple images at once

Hey! Amazing package, thanks for it.

Problem: I need to upload multiple files, is it possible to crop/rotate a few images at once?

移动端剪切定位不准确

你好, 组件在移动端的时候 剪切小窗和剪切定位不准确, 希望看一下,感谢

When used inside a form with other input elements it clears the data entered after image is uploaded (codesandbox attached).)

Hello, it's me again. When I use the image cropper inside a form which has other input fields the data, which is stored in the component's state, is cleared after I upload the image. Please check the codesandbox attached for a demo. First, enter the name and age, and then add an image using the cropper. You will see that the component's state is cleared after the image is uploaded.

https://codesandbox.io/s/beautiful-torvalds-frxpk?file=/src/App.js

antd的主题被覆盖了

antd-img-crop/src/index.jsx

Line 10 in 282d691

import 'antd/es/modal/style/index.css';

你这里直接引入了css文件 导致antd设置的主题 被你这个css覆盖掉了

Error: These dependencies were not found

antd web start failed:

嵌套在Form中使用getFieldDecorator无法接收Upload onChange事件

getValueFromEvent设置的事件不回调

{getFieldDecorator('icon', {
rules: [
{
required: true,
}
],
initialValue: icon,
valuePropName: 'file',
getValueFromEvent: this.iconUploadListener
})(


{icon ? : uploadButton}


)}

ant-slider is not show

Hello! and thanks for this awesome component ♥

I have this problem, the sliders is not show in the modal.

ie9能支持吗?

打包问题

我用到了你的插件，我发现你这边打包时 打包方式好像是错了。我引用后会报错误。


可以在打包的时候 把 import 也一起打包了吗？ 谢谢啦

ie中的生成的文件类型是blob，上传的时候怎么能修改filename

裁剪范围支持拖拽自定义的吗

裁剪范围支持拖拽自定义的吗

Image rotation

Hello @nanxiaobei!

I would like to submit a feature idea: have you considered adding a rotation utility to your component? It already does a great job, but it would be amazing with that. If not, are you open to a pull request? We may be able to do that in our team.

Thanks,

Uncaught Error: 'children' to 'ImgCrop' must be 'Upload' or 'Upload.Dragger'

我代码是这样写的，是包裹了Uplaod的
`

<Upload
action={isWx ? "/api/uploadToWx": url}
listType="picture-card"
fileList={list}
data={extraData}
onPreview={this.handlePreview}
onChange={v => {
// console.log("上传改变", list, fileList);
let file = v.file, fileList = v.fileList;

let index = _.findIndex(fileList, item => item.uid == file.uid);
if(file){
  if(file.status === "done"){
    // console.log("上传成功", v.file);
    let response = v.file.response;
    if(response && response.status === "success"){
      let fileItem = {
        uid: file.uid,
        url: response.url,
        status: "done",
      };
      if(isWx){
        fileItem.wx = response.wx;
      }
      fileList[index] = Object.assign(fileItem);
    }
  }else if(file.status === "uploading"){
    fileList[index] = Object.assign({
      uid: file.uid,
      // url: "",
      status: "uploading",
    });
  }
}
// console.log("上传组件的值改变", newValue);
onChange(fileList);

}}

{list.length >= num ? null : uploadButton}


`

not support `Upload.Dragger`

if (!Upload.type.defaultProps.beforeUpload) throw new Error(ERR_NOT_ONLY_UPLOAD);
Upload.type.defaultProps return undefined with Upload.Dragger

'children' to 'ImgCrop' must be 'Upload' or 'Upload.Dragger'

'children' to 'ImgCrop' must be 'Upload' or 'Upload.Dragger'

  <>
    <ImgCrop>
      <Upload
        listType="picture-card"
      >
        ++++++++++
      </Upload>
    </ImgCrop>
  </>

picture crop error in IOS

I have encountered a problem during upload a cropped picture.
When I upload a picture after I cropped it,The picture is displayed as a black photo in IOS.
How can I fix this problem?

[Feature Request] Set height and width relative to image size

I really like the simplicity of antd-img-crop compared to other alternatives. I would like to set the initial dimensions relative to the image size the users uploaded. Is this already possible with antd-img-crop and I missed it or is is it maybe already on your feature roadmap?

计划升级到antd 4.0吗？

上传长图，进入无剪裁框

在用你的组件，首先点个赞。在使用过程中，发现一些问题
1.上传长图，进入无剪裁框
2.点击模态框的时候已经取消裁剪了，但是点击确定按理是不更新图片的

Reopen the modal?

Is there a way to allow the user to reopen the modal for editing again?

在getFieldDecorator中使用ImgCrop的时候会报错，找不到refs，请问有什么解决方法吗？

**背景：**想在表单中使用antd4提供的Imgcrop上传并裁剪图片，使用后发现会报找不到refs，请问有办法解决吗？

---

代码：

{getFieldDecorator('logo')(
    <ImgCrop>
      <Upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        listType="picture-card"
      >
        上传
      </Upload>
    </ImgCrop>
)}

---

报错信息：
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

png图片被裁剪后体积反而变大了

png图片被裁剪后体积反而变大了，貌似是改变的图片的位深度这个属性，请问怎么控制这个值不变呢

裁减以后的图片上传后端报文件格式错误

结合antd的Upload组件，裁剪图片以后上传后端接口报文件格式错误，
不结合这个裁剪功能是可以上传的

Modal doesn't display properly

I have this issue with the modal when I click the add button,
the modal doesn't display properly and is positioned in a corner of the screen:

I'm using:

"antd": "4.2.5"
"ant-design-pro": "4.0.0"

Not custom css.

Custom styling

Please make it styleable or receive parent custom styling ie @primary-color etc..

is it possible to use this with Form.Item?

I am trying to use it with antd form:
<Form.Item {...props} valuePropName="file" getValueFromEvent={returnUploadedFileObject}>


<>
{loading ? : ''} Browse
</>


</Form.Item>

But I am not getting any event in returnUploadedFileObject. Is it possible to bind value with form?

第一次图片裁剪时的问题

第一次裁剪图片时 若直接移动裁剪部分或直接拉大裁剪边框 裁剪边框会弹到右下角或直接消失

When cropping a file, the size increases exponentially.

1. The size of the resulting file is many times larger than the original file size. this happens when loading jpeg files.
2. The resulting file is always of image/png type.

On screenshots, I tried to crop a 10.2mb jpeg image, width 10315px, height 7049px.
Output is 117.1 mb png image, width 7049px, height 7049px;

When width and height are specified the final image is scaled

Steps to Reproduce:

• use ImgCrop with the following attributes: width = 200 and height = 200
• upload an image larger than 200px (say 1200x1600)
• resize the crop for full image width
• Click Ok

Expected:

• uploaded image is 200x200

Actual:

• uploaded image is 1200x1200

black border on cropped image

Hi, Thank you for a great add-on to enable antd to be able to crop and rotate images.

There are two issues that I have spotted.

1. Currently when I upload an image without cropping or rotating, there is a thin black border on the left. (or left and top if you were to drag the image so that the top left corner is top left). This seems to only be happening with any jpg image with a predominantly white background that is 180px by 200px. (See screenshot attached of codepen example)
   

Sample image that easily replicates the black border when upload:

2. When rotating an image that is uploaded, the blank fillspace of the image is black. If I change the background color of the crop container, that can as per the react-easy-crop plugin discussion in the link below allow you to change the background color of the blank fillspace:

https://github.com/ricardo-ch/react-easy-crop/issues/148

see this demo: https://codesandbox.io/s/react-easy-crop-demo-with-cropped-output-m0spo?file=/src/styles.js

I was thinking of adding in a colorpicker ability for the user to be able to pick the background color fillspace or have this be done automatically. Perhaps it could be done where the zoom/crop slider is on the popup using something like this: https://github.com/casesandberg/react-color

Using antd-img-crop, How would I be able to change the background color of the fillspace? Would I need to pass in an extra prop?

I thank you in advance.

Circular crop and fix the crop area size programatically

It would be greate if we can have circular crop area and also programatically conrol the crop area size. If we can pass props to react-image-crop it would work

Img crop component should return crop value

I do the crop on the backend side instead of frontend, so I need to send the original file with crop value. Could you expose the onChange function which returns crop value (x, y, width, height) and the original file? It would be nice if we also support the behavior like react-image-crop:

https://github.com/DominicTobias/react-image-crop

Thanks!

Allow only images

When I upload a file like a pdf or a video the cropper doesn't display anything and If I click Ok now I get an error. I want to put restrictions on extensions allowed how to do it? How to handle this error.
demo link

在不直接上传的情况下，裁剪不返回结果

https://codesandbox.io/s/antd-img-crop-hix6n

error with the last version of andt + antd-img-crop

Hi. I had

        "antd": "^4.3.1",
        "antd-img-crop": "^3.3.0",

I update to

        "antd": "^4.3.3",
        "antd-img-crop": "^3.4.1",

Now I am getting this error, everytime I push F5 in a component with antd-img-crop (server side error):

使用umi ssr打包报错

报错如下
直接跑项目是没问题的，但是一打包就报错。使用的架构，umijs 2.8.9，@umijs/plugin-prerender 1.4.2， antd 3.22.0

添加自定义okText和cancelText

求在modal里添加自定义的okText和cancelText

未来可以设置图片的压缩比吗？现在感觉裁剪完后生成的体积有点大