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...