react-cropper图片裁剪并上传 ╰半夏微凉° 2022-11-11 05:10 217阅读 0赞 ## react-cropper图片裁剪并上传 ## [官方Demo][Demo] [github][] 1、安装 npm install --save react-cropper 2、效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfMDkyNg_size_16_color_FFFFFF_t_70] 3、大致代码 import Cropper from 'react-cropper'; import 'cropperjs/dist/cropper.css'; const ScreenCropper = (props) => { const [image, setImage] = useState(defaultImg); const [cropper, setCropper] = useState(''); const onChange = (e) => { e.preventDefault(); let files; if (e.dataTransfer) { files = e.dataTransfer.files; } else if (e.target) { files = e.target.files; } const reader = new FileReader(); reader.onload = () => { setImage(reader.result); }; reader.readAsDataURL(files[0]); }; const getCropData = () => { if (typeof cropper !== "undefined") { var file = dataURLtoFile(cropper.getCroppedCanvas().toDataURL()); let formData = new FormData(); formData.append("file", file); window.req = reqwest({ url: '', method: "POST", processData: false, headers: { Authorization: `jwt ${ token}` }, data: formData, success: (response) => { if (response.code === 200) { ... } }, }) } }; const dataURLtoFile = (dataurl, filename = 'file') => { let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let suffix = mime.split('/')[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${ filename}.${ suffix}`, { type: mime }) } return ( <div className="tailoring-box"> <div className="tailoring-flex"> <div className="preview-img"> <div className="img-preview" /> </div> <div className="tailoring-img"> <Cropper style={ { width: '100%', height: '100%' }} zoomTo={ 0.1} initialAspectRatio={ 1} autoCropArea={ 0.8} preview=".img-preview" src={ image} viewMode={ 1} guides={ true} minCropBoxHeight={ 100} // 最低高度 minCropBoxWidth={ 100} background={ true} responsive={ true} checkOrientation={ false} onInitialized={ (instance) => { setCropper(instance); }} /> </div> </div> <div className="tailoring-upload"> <a className="file">点击上传 <input type="file" accept="image/*" onChange={ onChange} onClick={ (e) => { e.target.value = '' }}/> // onClick事件是防止重复选择同一个文件的时,不触发onchange </a> </div> <Row justify='center' gutter={ 20}> <Col span={ 5}> <Button onClick={ onCancel}>取消</Button> </Col> <Col span={ 5}> <Button type="primary" onClick={ getCropData}>确定</Button> </Col> </Row> </div> ) } tips:图片初始在裁剪画布中加载需要时间,这个中间过渡状态还没写 [Demo]: https://codesandbox.io/s/wonderful-pine-i7fs3?file=/src/Demo.tsx:997-1002 [github]: https://github.com/react-cropper/react-cropper [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfMDkyNg_size_16_color_FFFFFF_t_70]: /images/20221022/b9e0481c6d7c4e5fb7b5ea2d53bc4c9f.png
还没有评论,来说两句吧...