关于react.js:reactcropper结合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')

实际

<Cropper
   src={image} 
   dragMode="move"
   minCropBoxWidth={cropWidth}
   minCropBoxHeight={cropHeight}
   viewMode={3}
   guides={false}
   center={false}
   checkOrientation={false}
   background={false}
   modal={false}
   toggleDragModeOnDblclick={false}
   cropBoxMovable={false} // 是否通过拖拽来挪动剪裁框
   cropBoxResizable={false} // 是否通过拖动来调整剪裁框的大小
   onInitialized={initial}
   zoom={zoom}
   style={style}
/>

联合 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…