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

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 缩放事件

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 = () => {
    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...

你可能感兴趣的