使用开源库：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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。