// 安装：npm install html2canvas
import html2canvas from 'html2canvas';

async function captureElement(elementId) {
  const element = document.getElementById(elementId);
  const canvas = await html2canvas(element);
  
  // 转换为图片并下载
  const image = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = image;
  link.download = 'element-screenshot.png';
  link.click();
}

// 使用示例：captureElement('target-element');

const puppeteer = require('puppeteer');

async function captureElementScreenshot(url, selector, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  
  const element = await page.$(selector);
  await element.screenshot({
    path: outputPath,
    type: 'png'
  });
  
  await browser.close();
}

// 使用示例：
// captureElementScreenshot('https://example.com', '#target-element', 'screenshot.png');

from selenium import webdriver

def capture_element_screenshot(url, selector, output_path):
    driver = webdriver.Chrome()
    driver.get(url)
    element = driver.find_element_by_css_selector(selector)
    element.screenshot(output_path)
    driver.quit()

# 使用示例：
# capture_element_screenshot('https://example.com', '#target-element', 'screenshot.png')

// Puppeteer解决方案示例
await page.evaluate(selector => {
  document.querySelector(selector).scrollIntoView();
}, selector);
await page.waitForTimeout(1000); // 等待1秒

// Puppeteer高清截图
await element.screenshot({
  path: outputPath,
  type: 'png',
  quality: 100,
  deviceScaleFactor: 2
});

// html2canvas配置
await html2canvas(element, {
  allowTaint: true,
  useCORS: true,
  backgroundColor: null,
  ignoreElements: (element) => element.classList.contains('ignore-me')
});

// 使用Puppeteer截图多个元素并拼接
const elements = await page.$$('.screenshot-target');
for (let i = 0; i < elements.length; i++) {
  await elements[i].screenshot({ path: `element-${i}.png` });
}

// 等待特定条件后截图
await page.waitForFunction(
  'document.querySelector("#status").textContent === "Ready"'
);
await element.screenshot({ path: 'ready-state.png' });