PHP实现HTML转图片并保存

家明 2025-09-19 0 0
HTML转图片生成器（高清优化版）

针对图片模糊问题，我对代码进行了优化，主要改进了渲染质量和清晰度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高清HTML转图片生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 20px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            width: 90%;
            max-width: 1000px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            padding: 25px;
            text-align: center;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .description {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .content-area {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
            gap: 20px;
        }
        
        .input-section, .output-section {
            flex: 1;
            min-width: 300px;
        }
        
        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #2c3e50;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }
        
        #htmlContent {
            width: 100%;
            height: 300px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: vertical;
            font-family: monospace;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .button-group {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        #generateBtn {
            background: #3498db;
            color: white;
            flex: 1;
        }
        
        #generateBtn:hover {
            background: #2980b9;
        }
        
        #downloadBtn {
            background: #2ecc71;
            color: white;
            flex: 1;
        }
        
        #downloadBtn:hover {
            background: #27ae60;
        }
        
        .result-container {
            margin-top: 20px;
            text-align: center;
            display: none;
        }
        
        #result {
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .notice {
            margin-top: 15px;
            padding: 10px;
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .quality-control {
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .quality-slider {
            width: 100%;
            margin: 10px 0;
        }
        
        .quality-value {
            font-weight: bold;
            color: #3498db;
        }
        
        footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 14px;
            border-top: 1px solid #eee;
        }
        
        /* 隐藏的渲染容器 - 提高质量的关键 */
        #hidden-renderer {
            position: absolute;
            left: -9999px;
            top: -9999px;
            width: 800px; /* 固定宽度确保一致性 */
            background: white;
            transform: scale(1.5); /* 提高渲染分辨率 */
            transform-origin: 0 0;
        }
        
        @media (max-width: 768px) {
            .content-area {
                flex-direction: column;
            }
            
            #hidden-renderer {
                width: 100vw;
                transform: scale(1.2);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>高清HTML转图片生成器</h1>
            <p class="description">输入HTML代码，生成高质量图片</p>
        </header>
        
        <div class="content-area">
            <div class="input-section">
                <h2 class="section-title">输入HTML内容</h2>
                <textarea id="htmlContent" placeholder="请输入HTML代码..."><!-- 示例HTML内容 -->
<div style="padding: 30px; background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); border-radius: 15px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.1);">
    <h1 style="color: #2c3e50; margin-bottom: 20px; font-size: 32px;">欢迎使用HTML转图片工具</h1>
    <p style="color: #34495e; line-height: 1.8; font-size: 18px;">这是一个高质量内容示例，生成的图片将保持清晰度。</p>
    <div style="margin: 25px 0; padding: 20px; background: rgba(255,255,255,0.8); border-radius: 10px;">
        <h2 style="color: #e74c3c; margin-bottom: 15px;">功能特点</h2>
        <ul style="text-align: left; display: inline-block; font-size: 16px;">
            <li style="margin-bottom: 10px;">支持CSS样式和渐变效果</li>
            <li style="margin-bottom: 10px;">生成高清图片，文字清晰</li>
            <li style="margin-bottom: 10px;">支持长按保存（移动端）</li>
            <li style="margin-bottom: 10px;">完全在浏览器中处理，无需服务器</li>
        </ul>
    </div>
    <div style="margin-top: 25px; color: #7f8c8d; font-size: 14px;">
        <p>生成时间：2023年11月15日</p>
        <p>图片质量：<span style="color:#3498db; font-weight:bold;">高清</span></p>
    </div>
</div></textarea>
                
                <div class="quality-control">
                    <h3 class="section-title">图片质量设置</h3>
                    <p>缩放比例: <span class="quality-value" id="scaleValue">3</span>x</p>
                    <input type="range" min="1" max="5" value="3" step="0.5" class="quality-slider" id="scaleSlider">
                    <p class="notice">提高缩放比例可获得更清晰的图片，但生成时间会增加</p>
                </div>
                
                <div class="button-group">
                    <button id="generateBtn">生成图片</button>
                    <button id="downloadBtn">下载图片</button>
                </div>
                
                <div class="notice">
                    <p><strong>使用提示：</strong> 在移动设备上，生成的图片可以长按保存到相册。</p>
                </div>
            </div>
            
            <div class="output-section">
                <h2 class="section-title">生成结果</h2>
                
                <div class="result-container" id="resultContainer">
                    <img id="result" />
                </div>
                
                <div id="placeholder" style="text-align: center; padding: 40px 20px; color: #7f8c8d; background: #f9f9f9; border-radius: 8px;">
                    <p>图片将在此处显示</p>
                </div>
                
                <div class="notice" style="margin-top: 20px;">
                    <p><strong>高清渲染技巧：</strong></p>
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        <li>使用较高缩放比例(2x-3x)</li>
                        <li>在HTML中使用矢量图标而非位图</li>
                        <li>使用较高分辨率图片资源</li>
                        <li>避免使用过小的字体大小</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 高清HTML转图片工具 | 使用优化版html2canvas技术</p>
        </footer>
    </div>

    <!-- 隐藏的渲染容器 -->
    <div id="hidden-renderer"></div>

    <!-- 引入html2canvas库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const htmlContent = document.getElementById('htmlContent');
            const generateBtn = document.getElementById('generateBtn');
            const downloadBtn = document.getElementById('downloadBtn');
            const resultContainer = document.getElementById('resultContainer');
            const resultImg = document.getElementById('result');
            const placeholder = document.getElementById('placeholder');
            const hiddenRenderer = document.getElementById('hidden-renderer');
            const scaleSlider = document.getElementById('scaleSlider');
            const scaleValue = document.getElementById('scaleValue');
            
            // 更新缩放值显示
            scaleSlider.addEventListener('input', function() {
                scaleValue.textContent = this.value;
            });
            
            // 生成图片
            generateBtn.addEventListener('click', function() {
                // 显示加载状态
                generateBtn.textContent = '生成中...';
                generateBtn.disabled = true;
                
                // 将HTML内容放入隐藏的渲染容器
                hiddenRenderer[xss_clean] = htmlContent.value;
                
                // 获取缩放比例
                const scale = parseFloat(scaleSlider.value);
                
                // 使用html2canvas将隐藏容器的内容转换为图片
                setTimeout(() => {
                    html2canvas(hiddenRenderer, {
                        scale: scale, // 使用可调节的缩放比例
                        logging: false,
                        useCORS: true,
                        backgroundColor: null,
                        allowTaint: true,
                        width: hiddenRenderer.scrollWidth,
                        height: hiddenRenderer.scrollHeight
                    }).then(canvas => {
                        // 显示结果
                        resultImg.src = canvas.toDataURL('image/png', 1.0); // 最高质量
                        resultContainer.style.display = 'block';
                        placeholder.style.display = 'none';
                        
                        // 恢复按钮状态
                        generateBtn.textContent = '生成图片';
                        generateBtn.disabled = false;
                        
                        // 滚动到结果区域
                        resultContainer.scrollIntoView({ behavior: 'smooth' });
                    }).catch(error => {
                        console.error('生成图片时出错:', error);
                        alert('生成图片时出错，请检查HTML代码是否正确。');
                        generateBtn.textContent = '生成图片';
                        generateBtn.disabled = false;
                    });
                }, 100);
            });
            
            // 下载图片
            downloadBtn.addEventListener('click', function() {
                if (resultImg.src) {
                    const link = document.createElement('a');
                    link.download = 'high-quality-html-image.png';
                    link.href = resultImg.src;
                    link.click();
                } else {
                    alert('请先生成图片！');
                }
            });
        });
    </script>
</body>
</html>