当前位置：首页 > HTML

h5怎么实现截图并保存

2026-03-06 11:53:52HTML

使用Canvas实现截图

通过HTML5的Canvas元素可以将DOM内容绘制到画布上，再转换为图片数据。具体实现分为捕获DOM元素和保存图片两步。

// 获取目标DOM元素
const targetElement = document.getElementById('capture-area');

// 使用html2canvas库绘制到Canvas
html2canvas(targetElement).then(canvas => {
  // 转换为图片URL
  const imageData = canvas.toDataURL('image/png');

  // 创建下载链接
  const link = document.createElement('a');
  link.href = imageData;
  link.download = 'screenshot.png';
  link.click();
});

需要引入html2canvas库：

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

使用WebRTC实现屏幕截图

对于需要截取屏幕或特定窗口的场景，可以通过WebRTC的getDisplayMedia API实现：

async function captureScreen() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { displaySurface: 'window' }
  });

  const videoTrack = stream.getVideoTracks()[0];
  const imageCapture = new ImageCapture(videoTrack);
  const bitmap = await imageCapture.grabFrame();

  // 转换为Canvas
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0);

  // 保存图片
  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'screen-capture.png';
    a.click();
  }, 'image/png');
}

纯前端保存图片

对于不需要复杂截图功能的情况，可以直接使用Canvas API：

function simpleCapture() {
  const canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext('2d');

  // 绘制页面内容
  ctx.drawWindow(window, 0, 0, canvas.width, canvas.height, 'white');

  // 触发下载
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'page-screenshot.png';
  link.href = dataURL;
  link.click();
}