日结-1 使用react-cropper实现图片裁剪

1. 安装 react-cropper

npm install --save react-cropper   //或者
yarn add  react-cropper

2. 组件内引入

import Cropper from "react-cropper"; // 引入Cropper
import "cropperjs/dist/cropper.css"; // 引入Cropper对应的css

3. 函数式组件

1. jsx文件

import {
    useState } from 'react';
import Cropper from 'react-cropper' // 引入Cropper
import 'cropperjs/dist/cropper.css' // 引入Cropper对应的css
import './App.css';

const MAX_FILE_SIZE = 5 * 1024 * 1024 // 文件最大限制为5M

function App() {
   

  const [hooksModalVisible, setHooksModalVisible] = useState(false) // 裁剪图片
  const [hooksModalFile, setHooksModalFile] = useState(null) // 选取的img文件
  const [hooksResultImgUrl, setHooksResultImgUrl] = useState(null)// 裁剪后的img

  const handleHooksFileChange = e => {
   
    const file = e.target.files[0]

    if (file) {
   
      if (file.size <= MAX_FILE_SIZE) {
   
      	//选中的文件
        setHooksModalFile(file)
        // 显示裁剪
        setHooksModalVisible(true)
      } else {
   
        console.log('文件过大')
      }
    }
  }

  return (
    <div>
      <h1>图片裁剪组件</h1