zoomSlider 缩放滑块
rotationSlider:旋转滑块
aspectSlider:纵横比滑块
showGrid:显示网格
import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, { useState } from 'react';
export default function ImgageCrop() {
const [fileList, setFileList] = useState<UploadFile[]>([
{
uid: '-1',
name: 'image.png',
status: 'done',
url: '',
},
]);
const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
setFileList(newFileList);
};
const onPreview = async (file: UploadFile) => {
let src = file.url as string;
if (!src) {
src = await new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(file.originFileObj as RcFile);
reader.onload = () => resolve(reader.result as string);
});
}
const image = new Image();
image.src = src;
const imgWindow ='750px';
imgWindow?.document.write(image.outerHTML);
};
return (
<div>
{/* zoomSlider 缩放滑块 rotationSlider:旋转滑块 aspectSlider:纵横比滑块 showGrid:显示网格*/}
<ImgCrop modalTitle={'ceshi'} modalWidth={700} maxZoom={1} minZoom={1} rotationSlider={false} zoomSlider={ false } aspectSlider={false} >
<Upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
listType="picture-card"
fileList={fileList}
onChange={onChange}
onPreview={onPreview}
>
{fileList.length == 1 && '+ Upload'}
</Upload>
</ImgCrop>
</div>
)
}