原创HTLM网页代码网页全屏截图生成图片带下载功能

原创于 2025-09-01 17:04:14 发布 · 206 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#网页截图 #网页截屏 #截图代码 #网页截屏代码 #HTML网页截图代码
实用工具同时被 2 个专栏收录
15 篇文章
订阅专栏
代码教程
13 篇文章
订阅专栏
优化点说明：
增加了二维码生成错误的具体提示，指导用户解决问题
优化了二维码生成流程，使用更可靠的QRCode.toCanvas方法
添加了错误处理机制，当二维码生成失败时显示具体原因和解决方案
保留了原有的截图和下载功能，确保核心功能不受影响
改进了用户界面，使错误提示更加明显和友好
代码分享不易请点个小小的关注支持一下作者吧

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级截图分享工具 代码分享不易 请点个小小的关注支持一下作者吧</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4cc9f0;
            --danger: #f72585;
            --light: #f8f9fa;
            --dark: #212529;
        }
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            line-height: 1.6;
            color: var(--dark);
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 2rem;
            margin: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: var(--primary);
            color: white;
            padding: 1.5rem;
            text-align: center;
        }
        .header h1 {
            margin: 0;
            font-size: 1.8rem;
        }
        #captureArea {
            padding: 2rem;
            background: white;
            margin: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            margin: 0.5rem;
        }
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }
        .btn-danger {
            background: var(--danger);
            color: white;
        }
        .btn-success {
            background: var(--success);
            color: white;
        }
        .action-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 1rem;
        }
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }
        .modal-content {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 500px;
            padding: 2rem;
            text-align: center;
            position: relative;
        }
        .close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--dark);
        }
        #previewImage {
            max-width: 100%;
            max-height: 60vh;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        #qrCode {
            width: 200px;
            height: 200px;
            margin: 1rem auto;
            background: white;
            padding: 1rem;
            border-radius: 8px;
        }
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            z-index: 1100;
            display: none;
            animation: slideUp 0.3s ease;
        }
        .loading {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 0.5rem;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translate(-50%, 20px);
            }
            to { 
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .error-message {
            color: var(--danger);
            margin-top: 1rem;
            font-size: 0.9rem;
        }
        .qr-instruction {
            margin: 1rem 0;
            color: var(--dark);
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-camera"></i> 高级截图分享工具</h1>
        </div>
        
        <div id="captureArea">
            <h2>截图内容区域</h2>
            <p>您可以自由编辑此区域内容，所有内容都将被包含在截图中</p>
            <p>示例内容：</p>
            <ul>
                <li>项目计划表</li>
                <li>数据分析图表</li>
                <li>重要通知信息</li>
            </ul>
            <div style="background: #f0f8ff; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
                <h3 style="margin-top: 0;">注意事项</h3>
                <p>1. 确保包含所有必要信息</p>
                <p>2. 检查敏感数据是否已移除</p>
                <p>3. 截图后可选择下载或生成分享二维码</p>
            </div>
        </div>
        
        <div class="action-buttons">
            <button id="captureBtn" class="btn btn-primary">
                <i class="fas fa-camera"></i> 生成截图
            </button>
        </div>
    </div>
    
    <!-- 截图预览弹窗 -->
    <div id="previewModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="closePreviewBtn">&times;</span>
            <h2>截图预览</h2>
            <img id="previewImage">
            <div style="margin-top: 1.5rem;">
                <button id="downloadBtn" class="btn btn-primary">
                    <i class="fas fa-download"></i> 下载图片
                </button>
                <button id="shareBtn" class="btn btn-success">
                    <i class="fas fa-qrcode"></i> 生成分享码
                </button>
            </div>
        </div>
    </div>
    
    <!-- 二维码弹窗 -->
    <div id="qrModal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="closeQrBtn">&times;</span>
            <h2>分享截图</h2>
            <div id="qrCode"></div>
            <p class="qr-instruction">
                使用手机扫描二维码查看图片内容<br>
                或直接截图保存二维码分享给他人
            </p>
            <div id="qrError" class="error-message"></div>
        </div>
    </div>
    
    <!-- 加载提示 -->
    <div id="loadingToast" class="toast">
        <div class="loading"></div>
        <span id="loadingText">正在处理...</span>
    </div>
    
    <!-- 消息提示 -->
    <div id="messageToast" class="toast"></div>

    <!-- 引入必要的库 -->
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
    
    <script>
        // 全局变量
        let currentScreenshotUrl = null;
        let isProcessing = false;
        
        // DOM元素
        const captureBtn = document.getElementById('captureBtn');
        const previewModal = document.getElementById('previewModal');
        const qrModal = document.getElementById('qrModal');
        const previewImage = document.getElementById('previewImage');
        const downloadBtn = document.getElementById('downloadBtn');
        const shareBtn = document.getElementById('shareBtn');
        const closePreviewBtn = document.getElementById('closePreviewBtn');
        const closeQrBtn = document.getElementById('closeQrBtn');
        const qrCodeElement = document.getElementById('qrCode');
        const qrErrorElement = document.getElementById('qrError');
        const loadingToast = document.getElementById('loadingToast');
        const loadingText = document.getElementById('loadingText');
        const messageToast = document.getElementById('messageToast');
        
        // 初始化
        function init() {
            setupEventListeners();
            checkHBuilderEnvironment();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            captureBtn.addEventListener('click', generateScreenshot);
            downloadBtn.addEventListener('click', downloadScreenshot);
            shareBtn.addEventListener('click', generateQRCode);
            closePreviewBtn.addEventListener('click', closePreviewModal);
            closeQrBtn.addEventListener('click', closeQRModal);
            
            // 点击模态框外部关闭
            [previewModal, qrModal].forEach(modal => {
                modal.addEventListener('click', (e) => {
                    if (e.target === modal) {
                        if (modal === previewModal) closePreviewModal();
                        else closeQRModal();
                    }
                });
            });
        }
        
        // 生成截图
        async function generateScreenshot() {
            if (isProcessing) return;
            
            try {
                startLoading('正在生成截图...');
                
                // 使用html2canvas捕获区域
                const canvas = await html2canvas(document.getElementById('captureArea'), {
                    scale: window.devicePixelRatio * 2, // 高清截图
                    logging: false,
                    useCORS: true,
                    allowTaint: true,
                    backgroundColor: '#ffffff'
                });
                
                // 转换为Blob对象
                canvas.toBlob(blob => {
                    if (!blob) {
                        showError('截图生成失败，请重试');
                        return;
                    }
                    
                    // 创建对象URL
                    if (currentScreenshotUrl) {
                        URL.revokeObjectURL(currentScreenshotUrl);
                    }
                    currentScreenshotUrl = URL.createObjectURL(blob);
                    
                    // 显示预览
                    previewImage.src = currentScreenshotUrl;
                    previewModal.style.display = 'flex';
                    
                    stopLoading();
                    showMessage('截图生成成功');
                    
                    // HBuilder环境准备文件
                    if (window.plus) {
                        prepareHBuilderFile(blob);
                    }
                }, 'image/png', 0.95);
                
            } catch (error) {
                console.error('截图错误:', error);
                showError(`截图失败: ${error.message}`);
                stopLoading();
            }
        }
        
        // 下载截图
        function downloadScreenshot() {
            if (!currentScreenshotUrl) return;
            
            const link = document.createElement('a');
            link.href = currentScreenshotUrl;
            link.download = `screenshot_${new Date().getTime()}.png`;
            document.body.appendChild(link);
            link.click();
            setTimeout(() => {
                document.body.removeChild(link);
            }, 100);
            
            showMessage('下载已开始');
        }
        
        // 生成二维码
        function generateQRCode() {
            if (!currentScreenshotUrl) return;
            
            // 关闭预览弹窗
            closePreviewModal();
            
            // 清空之前的二维码和错误
            qrCodeElement.innerHTML = '';
            qrErrorElement.textContent = '';
            
            startLoading('正在生成二维码...');
            
            // 使用QRCode.js生成二维码
            QRCode.toCanvas(qrCodeElement, currentScreenshotUrl, {
                width: 200,
                margin: 1,
                color: {
                    dark: '#000000',
                    light: '#ffffff'
                },
                errorCorrectionLevel: 'H' // 高容错率
            }, (error) => {
                stopLoading();
                
                if (error) {
                    console.error('二维码生成错误:', error);
                    qrErrorElement.textContent = '二维码生成失败，请尝试以下方法：\n1. 检查网络连接\n2. 重新生成截图\n3. 直接下载图片分享';
                    return;
                }
                
                // 显示二维码弹窗
                qrModal.style.display = 'flex';
                showMessage('二维码已生成，请截图分享');
            });
        }
        
        // HBuilder环境准备文件
        function prepareHBuilderFile(blob) {
            if (!window.plus) return;
            
            const fileName = `screenshot_${new Date().getTime()}.png`;
            const filePath = `_downloads/${fileName}`;
            
            plus.io.requestFileSystem(plus.io.PRIVATE_DOC, fs => {
                fs.root.getFile(filePath, { create: true }, fileEntry => {
                    fileEntry.createWriter(writer => {
                        writer.onwriteend = () => {
                            console.log('文件准备完成');
                        };
                        writer.onerror = e => {
                            console.error('文件写入错误:', e);
                        };
                        writer.write(blob);
                    });
                }, err => {
                    console.error('文件创建失败:', err);
                });
            });
        }
        
        // 检查HBuilder环境
        function checkHBuilderEnvironment() {
            if (window.plus) {
                // 请求存储权限
                plus.android.requestPermissions(
                    ['android.permission.WRITE_EXTERNAL_STORAGE'],
                    () => console.log('存储权限已获取'),
                    (e) => console.warn('权限获取失败:', e)
                );
            }
        }
        
        // 关闭预览弹窗
        function closePreviewModal() {
            previewModal.style.display = 'none';
        }
        
        // 关闭二维码弹窗
        function closeQRModal() {
            qrModal.style.display = 'none';
        }
        
        // 显示加载提示
        function startLoading(text) {
            isProcessing = true;
            loadingText.textContent = text || '正在处理...';
            loadingToast.style.display = 'flex';
        }
        
        // 隐藏加载提示
        function stopLoading() {
            isProcessing = false;
            loadingToast.style.display = 'none';
        }
        
        // 显示消息提示
        function showMessage(text, duration = 3000) {
            messageToast.textContent = text;
            messageToast.style.display = 'flex';
            
            setTimeout(() => {
                messageToast.style.display = 'none';
            }, duration);
        }
        
        // 显示错误提示
        function showError(text, duration = 4000) {
            messageToast.style.backgroundColor = 'rgba(247, 37, 133, 0.9)';
            showMessage(text, duration);
            
            // 恢复默认颜色
            setTimeout(() => {
                messageToast.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
            }, duration);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>