当前位置：首页 > JavaScript

js实现截图

2026-02-28 22:53:54JavaScript

使用html2canvas库实现网页截图

html2canvas是一个流行的JavaScript库，可以将网页元素转换为canvas图像。安装方式：

npm install html2canvas

基础实现代码：

import html2canvas from 'html2canvas';

const captureElement = document.getElementById('target-element');

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

使用Canvas API实现区域截图

对于特定区域的截图，可以直接使用Canvas的drawImage方法：

function captureArea(x, y, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  ctx.drawImage(
    document.documentElement, 
    x, y, width, height,
    0, 0, width, height
  );

  return canvas.toDataURL('image/png');
}

使用第三方服务实现整页截图

对于需要完整页面截图的情况，可以配合无头浏览器服务：

// 使用Puppeteer的示例
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'fullpage.png', fullPage: true});
  await browser.close();
})();

处理跨域资源问题

当截图包含跨域资源时，需要配置CORS策略：

html2canvas(element, {
  useCORS: true,
  allowTaint: true,
  logging: true,
  scale: 2 // 提高分辨率
}).then(canvas => {
  // 处理结果
});

移动端截图注意事项

在移动设备上实现截图时，需要考虑viewport设置：

const options = {
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
  windowWidth: document.documentElement.offsetWidth,
  windowHeight: document.documentElement.offsetHeight
};

html2canvas(document.body, options).then(canvas => {
  // 处理移动端截图
});