当前位置：首页 > React

react实现截图

2026-01-26 12:35:40React

React 实现截图的方法

在 React 中实现截图功能可以通过多种方式完成，以下是几种常见的方法：

使用 html2canvas 库

html2canvas 是一个流行的 JavaScript 库，可以将网页内容转换为 Canvas 图像。安装 html2canvas：

npm install html2canvas

使用示例：

import React from 'react';
import html2canvas from 'html2canvas';

const ScreenshotComponent = () => {
  const takeScreenshot = () => {
    html2canvas(document.getElementById('target-element')).then(canvas => {
      const image = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = 'screenshot.png';
      link.href = image;
      link.click();
    });
  };

  return (
    <div>
      <div id="target-element">
        {/* 需要截图的内容 */}
        <h1>截图内容</h1>
      </div>
      <button onClick={takeScreenshot}>截图</button>
    </div>
  );
};

export default ScreenshotComponent;

使用 react-screenshot 库

react-screenshot 是一个专门为 React 设计的截图库，简化了截图流程。安装 react-screenshot：

npm install react-screenshot

使用示例：

import React from 'react';
import { useScreenshot } from 'react-screenshot';

const ScreenshotComponent = () => {
  const { image, takeScreenshot } = useScreenshot();
  const ref = React.useRef(null);

  return (
    <div>
      <div ref={ref}>
        {/* 需要截图的内容 */}
        <h1>截图内容</h1>
      </div>
      <button onClick={() => takeScreenshot(ref.current)}>截图</button>
      {image && <img src={image} alt="截图" />}
    </div>
  );
};

export default ScreenshotComponent;

使用 Canvas API 手动实现

如果需要更精细的控制，可以直接使用 Canvas API 实现截图功能。示例代码如下：

import React, { useRef } from 'react';

const ScreenshotComponent = () => {
  const targetRef = useRef(null);

  const takeScreenshot = () => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const targetElement = targetRef.current;

    canvas.width = targetElement.offsetWidth;
    canvas.height = targetElement.offsetHeight;

    const htmlToImage = (element) => {
      return new Promise((resolve) => {
        html2canvas(element).then(canvas => {
          resolve(canvas);
        });
      });
    };

    htmlToImage(targetElement).then(canvas => {
      const image = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = 'screenshot.png';
      link.href = image;
      link.click();
    });
  };

  return (
    <div>
      <div ref={targetRef}>
        {/* 需要截图的内容 */}
        <h1>截图内容</h1>
      </div>
      <button onClick={takeScreenshot}>截图</button>
    </div>
  );
};

export default ScreenshotComponent;