html2canvas 截图_前端实现点击元素时将点击的元素截图 html2canvas-优快云博客

本文链接：https://blog.youkuaiyun.com/SmallPig_Code/article/details/130298879

该代码示例展示了如何在React组件中利用html2canvas库截取指定id为box的元素，并将其转换为canvas，然后转化为base64字符串显示为图片。同时提到了若需保存图片，可以将canvas转为Blob对象并进行上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能

点击截图按钮，截取box元素，并展示
初始：
在这里插入图片描述
点击截图：

import html2canvas from 'html2canvas';
import { useCallback, useState } from 'react';

const Image = () => {
  const [imgSrc, setImgSrc] = useState('');

  const takeSnapshot = useCallback(async () => {
    const box = document.getElementById('box');
    if (!box) return;

    // 将html转化为canvas
    const canvas = await html2canvas(box, {
      useCORS: true,
      backgroundColor: null
    });
    console.log('canvas', canvas);

    // 将canvas中的内容转换为一个 base64 编码的字符串，用于图片展示
    const img = canvas.toDataURL('image/jpeg');
    console.log('img', img);
    setImgSrc(img);
  }, []);

  return (
    <>
      <div
        id="box"
        style={{
          height: '100px',
          width: '100px',
          border: '1px solid red',
          backgroundColor: 'white'
        }}>
        hhh
      </div>
      <button onClick={takeSnapshot}>截图</button>
      <br />
      <br />
      <br />
      <img src={imgSrc}></img>
    </>
  );
};

export default Image;

注意事项

如果box元素没有设置背景颜色，默认截图的背景色会是黑色
开发中一般会将由html2canvas得到的canvas，利用canvas.toBlob()方法转化为一个 Blob 对象，上传保存，从而得到图片的地址

const takeSnapshot = async (element: HTMLElement) => {
  const canvas = await html2canvas(element, {
    useCORS: true,
    backgroundColor: null,
  });
  const file = await canvasToFile(canvas);
  const snapshotUrl = await uploadImage(file);

  return snapshotUrl;
};

const canvasToFile = (canvas: HTMLCanvasElement) => {
  return new Promise<File>((resolve, reject) => {
    canvas.toBlob((blob) => {
      if (blob) {
        const file = new File([blob], 'snapshot.png');
        resolve(file);
      } else {
        reject(null);
      }
    });
  });
};