react-cropper结合Antd|react-cropper结合Antd Upload实现图片裁剪并上传 react-cropper结合AntdUpload实现图片

cropper文档 cropperjs
react-cropper
cropperjs翻译文档：cropper.js 裁剪图片并上传（文档翻译+demo）
install

yarn add react-cropper

import Cropper from 'react-cropper' import 'cropperjs/dist/cropper.css'

主要配置说明 viewMode 配置视图模式
https://github.com/fengyuanch...

0：无限制
1：限制裁剪框不能超出图片的范围
2：限制裁剪框不能超出图片的范围，且图片填充模式为最长边填充
3：限制裁剪框不能超出图片的范围，且图片填充模式为最短边填充

dragMode 配置拖拽模式
https://github.com/fengyuanch...

crop：拖拽形成新的裁剪框
move：拖拽只能移动图片
none：不做处理

主要方法说明 onInitialized 获取cropper实例
https://github.com/react-crop...

onInitialized={(instance) => {cropper.current = instance}}

zoom 缩放事件
【react-cropper结合Antd|react-cropper结合Antd Upload实现图片裁剪并上传】https://github.com/fengyuanch...
在zoom监听事件中限制最大最小缩放比例：

const zoom = (e) => { const { ratio, oldRatio } = e.detail // zoom in if (ratio > oldRatio) { if (ratio > maxRatio) { e.preventDefault() cropper.current.zoomTo(maxRatio) } // zoom out } else if (ratio < oldRatio) { if (ratio < minRatio) { e.preventDefault() cropper.current.zoomTo(minRatio) } } }

getCanvasData 获取裁剪的图片数据
https://github.com/fengyuanch...
toBlob toBlob第二个参数默认是image/png。

const getCroppedData = https://www.it610.com/article/() => { return new Promise((resolve, reject) => { try { cropper.current.getCroppedCanvas({ // ... imageSmoothingQuality: 'high', }).toBlob((blob) => { resolve(blob) }, 'image/jpeg') } catch (e) { reject() } }) }

toDataURL

cropper.current.getCroppedCanvas().toDataURL('image/jpeg')

实践

结合Antd Upload裁剪并上传图片
beforeUpload返回Promise。在beforeUpload方法中，将得到的图片文件转成DataURL传给裁剪组件。设置定时器，每隔一段时间查询裁剪是否完成，若裁剪完成则resolve(croppedFile)。

const beforeUpload = (file) => { return new Promise((resolve, reject) => { imageBlob.current = null let reader = new FileReader() reader.readAsDataURL(file) reader.onload = (e) => { setCropImage(e.target.result) }// 定时器 timer.current = window.setInterval(() => { // 裁剪完成 if (imageBlob.current) { window.clearInterval(timer.current) // blob转file const croppedFile = new File([avatarBlob.current], file.name, { type: 'image/jpeg', uid: file.uid, lastModified: Date.now(), }) resolve(croppedFile) } }, 100) }) }

Demo
https://stackblitz.com/edit/r...