QuickStart

Hooks

import React, { useState, useCallback, useRef } from "react";
import styles from "./index.module.less";
import { errorBoundary } from "@utils/errorBoundary/index";
import avaterImg from "./avater.png"; // 必须本地图片
// react-cropper
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

const Index = () => {
  const cropperRef = useRef(null);
  const [croppedImg, setCroppedImg] = useState("");

  const handleSave = () => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    setCroppedImg(cropper.getCroppedCanvas().toDataURL());
  };
  const handleRight = () => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    cropper.rotate(-90);
  };
  const handleLeft = () => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    cropper.rotate(90);
  };
  const handleClose = () => {
    setCroppedImg("");
  };
  return (
    <div className={styles.wrap}>
      <div className={styles.title}>
        图片裁剪
        <button onClick={handleSave}>Save</button>
        <button onClick={handleRight}>right_90</button>
        <button onClick={handleLeft}>left_90</button>
      </div>

      <div className={styles.editer}>
        <Cropper
          src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
          style={{ height: window.innerHeight, width: window.innerWidth }}
          // initialAspectRatio={16 / 9} // 初始纵横比
          aspectRatio={16 / 9}
          guides={false}
          ref={cropperRef}
          viewMode={1} // 视图模式
          dragMode={"move"} //拖动模式
          background={false}
          cropBoxMovable={false}
          cropBoxResizable={false}
          zoomOnWheel={false}
          zoomOnTouch={true}
          minCropBoxWidth={window.innerWidth}
        />
        {croppedImg && (
          <img
            src={croppedImg}
            onClick={handleClose}
            className={styles.croppedImg}
          />
        )}
      </div>
    </div>
  );
};

export default errorBoundary(Index);