前言
文件和图片的上传我们可能经常会去做,antd中也有现成的可直接使用,今天分享一个封装好的图片裁剪库react-cropper
仓库地址:点击此处查看github仓库地址
Demo演示:点击此处查看实际效果
一、下载安装
npm install cropperjs
二、配合antd使用
和Upload组件一起使用
<Upload
customRequest={options => {
options?.onSuccess?.({ data: options.file });
}}
onChange={({ file }) => handleLogoChange(file as UploadFile)}
showUploadList={false}
>
<Button size='small' type='link'>
上传
</Button>
</Upload>
// 在弹窗中进行裁剪操作
<Modal
title='裁剪LOGO'
open={isModalOpen}
onOk={handleOk}
onCancel={handleCancel}
width={400}
>
<Cropper
ref={cropperRef}
style={{ height: 200, width: '100%' }}
initialAspectRatio={1}
src={image}
responsive={true}
autoCropArea={1}
checkOrientation={false}
guides={true}
/>
</Modal>
具体的api可查看官方文档,已满足开发需求。
选择和裁剪上传操作如下所示:
// 选择图片
const handleLogoChange = async (file: UploadFile) => {
setImage(URL.createObjectURL(file.originFileObj as File));
setOriginalFile(file.originFileObj);
setIsModalOpen(true);
};
// 裁剪后上传
const handleOk = () => {
if (cropperRef.current) {
cropperRef.current.cropper.getCroppedCanvas().toBlob(async blob => {
if (blob && originalFile) {
const croppedFile = new File([blob], originalFile?.name, {
type: originalFile?.type,
lastModified: Date.now(),
});
...
// 这里可进行你的上传操作
// 配合后端接口来具体完成
}
});
}
};
到这里就实现了一个图片的裁剪上传,可支持自定义比例的裁剪。