当前位置：首页 > React

react实现缩略图

2026-01-26 11:06:18React

实现缩略图的基本方法

使用React实现缩略图可以通过多种方式完成，常见的方法是结合HTML5的Canvas或第三方库。以下是几种典型实现方案。

使用HTML5 Canvas生成缩略图

通过Canvas的drawImage方法可以调整图片尺寸并生成缩略图。以下是一个示例组件：

import React, { useRef, useEffect } from 'react';

const ThumbnailGenerator = ({ src, width, height }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = () => {
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
    };
    img.src = src;
  }, [src, width, height]);

  return <canvas ref={canvasRef} />;
};

export default ThumbnailGenerator;

使用第三方库react-image-crop

对于更复杂的裁剪需求，可以使用react-image-crop库。安装后通过以下方式实现：

import React, { useState } from 'react';
import ReactCrop from 'react-image-crop';

const ThumbnailCropper = ({ src }) => {
  const [crop, setCrop] = useState({ aspect: 1 });
  const [croppedImage, setCroppedImage] = useState(null);

  const onCropComplete = (crop) => {
    const canvas = document.createElement('canvas');
    const image = new Image();
    image.src = src;
    image.onload = () => {
      canvas.width = crop.width;
      canvas.height = crop.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(
        image,
        crop.x,
        crop.y,
        crop.width,
        crop.height,
        0,
        0,
        crop.width,
        crop.height
      );
      setCroppedImage(canvas.toDataURL());
    };
  };

  return (
    <div>
      <ReactCrop src={src} crop={crop} onChange={setCrop} onComplete={onCropComplete} />
      {croppedImage && <img src={croppedImage} alt="Cropped thumbnail" />}
    </div>
  );
};

export default ThumbnailCropper;

使用CSS直接缩放图片

如果仅需视觉上的缩略图效果，可以直接通过CSS控制：

const Thumbnail = ({ src, width, height }) => {
  return (
    <img
      src={src}
      style={{
        width: `${width}px`,
        height: `${height}px`,
        objectFit: 'cover'
      }}
      alt="Thumbnail"
    />
  );
};