nanxiaobei / antd-img-crop Goto Github PK

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

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

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.

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

Hello! and thanks for this awesome component ♥

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

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?

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

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

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

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,

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"
    }

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!

Hey! Amazing package, thanks for it.

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

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

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

getValueFromEvent设置的事件不回调

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


{icon ? : uploadButton}


)}

我代码是这样写的，是包裹了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}


`

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

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

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

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

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


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

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

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

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

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

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):

antd web start failed:

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.

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

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!

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

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?

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

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;

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>

如题，只能是按比例吗？

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

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.

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

**背景：**想在表单中使用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()?

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

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

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

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?

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

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