H5滚动截取长图 

使用开源库：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>

　　

posted @ 2025-09-10 09:59  SKILL·NULL  阅读(11)  评论(0)    收藏  举报