当前位置：首页 > JavaScript

js如何实现页面截图

2026-01-31 05:09:25JavaScript

使用html2canvas库实现截图

html2canvas是一个流行的JavaScript库，能将DOM元素转换为Canvas图像。需引入库后调用以下代码：

import html2canvas from 'html2canvas';

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

该方法支持自定义配置，如缩放比例、背景透明度等。注意跨域资源需配置useCORS: true。

使用Canvas的drawImage方法

若需截取特定Canvas内容，可直接使用Canvas API：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context.drawImage(videoOrCanvasElement, 0, 0, canvas.width, canvas.height);

// 导出为图片
const dataURL = canvas.toDataURL('image/jpeg');

浏览器原生API：MediaDevices.getDisplayMedia

适用于截取浏览器标签页或屏幕内容：

async function captureTab() {
  const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  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);
  videoTrack.stop();
}

注意：此方法需用户授权且仅支持HTTPS环境。

使用第三方服务（如Apify）

对于复杂页面（含滚动区域），可调用无头浏览器服务：

const apify = require('apify-client');
const client = new apify.ApifyClient({
  token: 'YOUR_API_KEY',
});
client.tasks.call({
  taskId: 'screenshot-task',
  inputs: { url: 'https://example.com' }
}).then(({ screenshotUrl }) => {
  console.log('截图URL:', screenshotUrl);
});

需注册API密钥并可能产生费用。

js如何实现页面截图