使用开源库：html2canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
<!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> |