react hooks里通过react-avatar-editor插件，实现图片剪裁，压缩功能

在项目中遇到了用户上传头像图片过大，api会报错的问题。

所以在上传之前我们需要把图片剪裁压缩一下。
呈现的效果如图：

首先需要安装 react-avatar-editor 库：
npm install --save react-avatar-editor

手机端的页面，我用的是material-ui的组件

import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
import AvatarEditor from 'react-avatar-editor'
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';

const style = {width:320, height: 320,cursor: 'move'};
return (
  <Dialog
     open={open}
     onClose={handleClose}
   >
    <DialogTitle id="alert-dialog-title">编辑图片</DialogTitle>
    <DialogContent>
      <AvatarEditor
        ref={setEditorRef}
        image={imagesrc}
        width={320}
        height={320}
        border={50}
        color={[255, 255, 255, 0.6]} // RGBA
        scale={scale}
        rotate={rotate}
        style={style}
        borderRadius={180}
      />
     <Typography orientation="left">缩放</Typography>
          <Slider onChange={(event, newValue) => { setScale(newValue) }} step={0.05} min={1} max={2} />
          <Typography orientation="left">旋转</Typography>
          <Slider onChange={(event, newValue) => { setRotate(newValue) }} step={90} min={0} max={270} />
    </DialogContent>
     <DialogActions>
          <Button onClick={handleClose} color="primary">
           取消
          </Button>
          <Button onClick={handleOk} color="primary" autoFocus>
            确认
          </Button>
        </DialogActions>
      </Dialog>
 ）

把获取到的图片转成二进制之后传给AvatarEditor插件

const handleFileInputChange = e => {
    const ImageFile = e.target.files[0];
    const fileReader = new FileReader();
       fileReader.readAsDataURL(ImageFile);
       fileReader.onload = (e) => {
       const data= e.target.result;
       setImagesrc(data);
    }
    setOpen(true);
  };
  const setEditorRef = (editor) => (setImageEditor(editor));

此时原始图片的信息已经在setEditorRef里了，我们把它放在imageEditor里，点击确定之后，通过imageEditor自带的函数把图片剪裁压缩成我们设置的尺寸。

const handleOk = () => {
    if (imageEditor) {   
      const canvasScaled = imageEditor.getImageScaledToCanvas().toDataURL();自带函数转成二进制
      onChange(canvasScaled);
    }else {onChange(imagesrc)}

    setOpen(false);
  }

这样大尺寸的图片就成功被我们剪裁压缩了。