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-avatar-editor
import AvatarEditor from "react-avatar-editor";

const Index = () => {
  const [imgSrc, setImgSrc] = useState("");

  const editor = useRef();

  const save = async () => {
    if (editor) {
      const canvas = editor.current.getImage().toDataURL("image/png");
      // const canvas = editor?.current.getImageScaledToCanvas().toDataURL()

      setImgSrc(canvas);
    }
  };

  return (
    <div className={styles.wrap}>
      <div className={styles.title}>
        图片裁剪
        <button onClick={save}>Save</button>
      </div>
      <div className={styles.editer}>
        <AvatarEditor
          image={avaterImg}
          width={window.innerWidth}
          height={250}
          border={50}
          color={[0, 0, 0, 0.5]} // RGBA
          scale={1.2}
          rotate={0}
          ref={editor}
        />

        {imgSrc && <img src={imgSrc} />}
      </div>
    </div>
  );
};

export default errorBoundary(Index);