使用 antd-img-crop裁剪图片会生成一个白色背景色,怎么取消
时间: 2024-01-16 09:02:50 浏览: 126
您可以通过设置`crop`组件的`border`属性为`false`来取消生成白色背景色。下面是一个示例代码:
```jsx
import React from 'react';
import { Upload, Button } from 'antd';
import ImgCrop from 'antd-img-crop';
const Demo = () => {
const onChange = (info) => {
console.log(info);
};
const onPreview = async (file) => {
let src = file.url;
if (!src) {
src = await new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file.originFileObj);
reader.onload = () => resolve(reader.result);
});
}
const image = new Image();
image.src = src;
const imgWindow = window.open(src);
imgWindow.document.write(image.outerHTML);
};
return (
<ImgCrop rotate>
<Upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
listType="picture-card"
onChange={onChange}
onPreview={onPreview}
>
<Button>Upload</Button>
</Upload>
</ImgCrop>
);
};
export default Demo;
```
在上述代码中,我们通过`border`属性将`crop`组件的边框设置为`false`,这样就可以取消生成白色背景色。您可以根据您的具体需求进行调整。
阅读全文