当前位置：首页 > React

react实现头像剪切

2026-01-26 21:26:26React

实现头像剪切功能

在React中实现头像剪切功能可以通过第三方库如react-avatar-editor或cropperjs来完成。以下是两种常用方法的详细说明：

使用react-avatar-editor

react-avatar-editor是一个专为React设计的头像编辑组件，支持缩放、旋转和裁剪。

安装依赖：

npm install react-avatar-editor

示例代码：

import React, { useState, useRef } from 'react';
import AvatarEditor from 'react-avatar-editor';

function AvatarCropper() {
  const [image, setImage] = useState(null);
  const [scale, setScale] = useState(1);
  const editorRef = useRef(null);

  const handleImageChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setImage(URL.createObjectURL(e.target.files[0]));
    }
  };

  const handleSave = () => {
    if (editorRef.current) {
      const canvas = editorRef.current.getImageScaledToCanvas();
      const croppedImage = canvas.toDataURL();
      console.log(croppedImage); // 处理裁剪后的图像
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      {image && (
        <>
          <AvatarEditor
            ref={editorRef}
            image={image}
            width={250}
            height={250}
            border={50}
            scale={scale}
          />
          <input
            type="range"
            min="1"
            max="2"
            step="0.01"
            value={scale}
            onChange={(e) => setScale(parseFloat(e.target.value))}
          />
          <button onClick={handleSave}>保存</button>
        </>
      )}
    </div>
  );
}

使用cropperjs

cropperjs是一个功能强大的通用图像裁剪库，可以与React结合使用。

安装依赖：

npm install cropperjs

示例代码：

react实现头像剪切

import React, { useEffect, useRef, useState } from 'react';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

function ImageCropper() {
  const [imageSrc, setImageSrc] = useState(null);
  const imageRef = useRef(null);
  const cropperRef = useRef(null);

  const handleFileChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setImageSrc(URL.createObjectURL(e.target.files[0]));
    }
  };

  useEffect(() => {
    if (imageSrc && imageRef.current) {
      cropperRef.current = new Cropper(imageRef.current, {
        aspectRatio: 1,
        viewMode: 1,
      });
    }
    return () => {
      if (cropperRef.current) {
        cropperRef.current.destroy();
      }
    };
  }, [imageSrc]);

  const handleCrop = () => {
    if (cropperRef.current) {
      const canvas = cropperRef.current.getCroppedCanvas();
      const croppedImage = canvas.toDataURL('image/jpeg');
      console.log(croppedImage); // 处理裁剪后的图像
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {imageSrc && (
        <>
          <img
            ref={imageRef}
            src={imageSrc}
            alt="裁剪目标"
            style={{ maxWidth: '100%' }}
          />
          <button onClick={handleCrop}>裁剪</button>
        </>
      )}
    </div>
  );
}