当前位置：首页 > JavaScript

js 实现截图功能

2026-03-01 05:46:25JavaScript

使用HTML2Canvas库实现截图

HTML2Canvas是一个流行的JavaScript库，可以将网页中的DOM元素转换为Canvas图像，从而实现截图功能。需要先安装或引入该库。

安装方式：

npm install html2canvas

基础代码示例：

import html2canvas from 'html2canvas';

const element = document.getElementById('target-element');
html2canvas(element).then(canvas => {
  document.body.appendChild(canvas); // 添加到页面
  // 或转换为图片下载
  const image = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = image;
  link.download = 'screenshot.png';
  link.click();
});

使用Canvas的toDataURL方法

对于已存在的Canvas元素，可以直接使用原生API导出图像：

const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/jpeg', 0.8); // 第二个参数为质量

浏览器原生API实现区域截图

现代浏览器支持通过MediaDevices API捕获屏幕或窗口：

async function captureScreen() {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia();
    const videoTrack = stream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(videoTrack);
    const bitmap = await imageCapture.grabFrame();

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

    return canvas.toDataURL();
  } catch (err) {
    console.error('Error:', err);
  }
}

注意事项

跨域限制：若截图内容包含跨域资源（如外部图片），需确保资源支持CORS
性能优化：大范围截图可能导致内存问题，建议分区域处理
样式保留：部分CSS属性（如box-shadow）可能无法完美渲染
浏览器兼容性：不同浏览器对canvas的导出格式支持度不同

高级功能实现

对于需要交互式选择的截图工具，可结合鼠标事件：

let startX, startY;
document.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  startY = e.clientY;
});

document.addEventListener('mouseup', (e) => {
  const width = e.clientX - startX;
  const height = e.clientY - startY;

  html2canvas(document.body, {
    x: startX,
    y: startY,
    width: width,
    height: height,
    scrollX: -window.scrollX,
    scrollY: -window.scrollY
  }).then(canvas => {
    // 处理截图结果
  });
});

js 实现截图功能