使用开源库：html2canvas
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>H5滚动截长图示例</title><script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script><style>body {font-family: 'Arial', sans-serif;margin: 0;padding: 20px;background-color: #f5f7fa;}.container {max-width: 800px;margin: 0 auto;background: white;padding: 20px;border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}h1 {color: #333;text-align: center;}.controls {display: flex;justify-content: center;gap: 10px;margin: 20px 0;}button {padding: 10px 20px;background: #4CAF50;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background 0.3s;}button:hover {background: #45a049;}#result {margin-top: 20px;text-align: center;}#content {margin-top: 30px;padding: 20px;background: #f9f9f9;border-radius: 5px;}.section {margin-bottom: 30px;padding: 15px;background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);}.loading {display: none;text-align: center;margin: 20px 0;color: #666;}</style>
</head>
<body><div class="container"><h1>H5滚动截长图示例</h1><div class="controls"><button id="captureBtn">生成截图</button><button id="downloadBtn" disabled>下载图片</button></div><div class="loading" id="loading">正在生成截图，请稍候...</div><div id="result"></div><div id="content"><h2>测试内容区域</h2><div id="longContent"></div><div id="capter" style="height: 600px;width: calc(100% - 20px);background: orange;padding: 10px;">你好，测试截图</div></div></div><script>// 生成测试内容const longContent = document.getElementById('longContent');for (let i = 1; i <= 20; i++) {const section = document.createElement('div');section.className = 'section';section.innerHTML = `<div id="section_${i}"><h3>第 ${i} 部分</h3><p>这是自动生成的测试内容段落 ${i}，用于演示长页面截图功能。</p></div>`;longContent.appendChild(section);}let generatedImage = null;document.getElementById('captureBtn').addEventListener('click', async function() {const loading = document.getElementById('loading');const result = document.getElementById('result');const captureBtn = document.getElementById('captureBtn');const downloadBtn = document.getElementById('downloadBtn');loading.style.display = 'block';result.innerHTML = '';captureBtn.disabled = true;try {// 获取整个文档高度const body = document.body;const html = document.documentElement;const height = Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight);// 使用html2canvas截图const canvas = await html2canvas(document.querySelector("#capter"), {scale: 2, // 高清截图scrollY: -window.scrollY, // 修正滚动位置windowHeight: height, // 设置窗口高度为整个页面高度useCORS: true, // 允许跨域图片allowTaint: true,logging: true});generatedImage = canvas.toDataURL('image/png');result.innerHTML = `<img src="${generatedImage}" style="max-width:100%; border:1px solid #ddd; border-radius:5px;">`;downloadBtn.disabled = false;} catch (error) {console.error('截图失败:', error);result.innerHTML = `<p style="color:red;">截图失败: ${error.message}</p>`;} finally {loading.style.display = 'none';captureBtn.disabled = false;}});document.getElementById('downloadBtn').addEventListener('click', function() {if (!generatedImage) return;const link = document.createElement('a');link.download = 'fullpage-screenshot.png';link.href = generatedImage;link.click();});</script>
</body>
</html>
