---
layout: default
title: HTML to Image - Convert HTML to PNG/JPG
description: Convert HTML content or web pages to images with customizable settings.
permalink: /playground/tools/html-to-image/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>HTML to Image</h1>
        <p class="tool-description">Convert HTML content to PNG or JPG images</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="input-group">
            <label for="htmlInput">HTML Content:</label>
            <textarea id="htmlInput" placeholder="Paste your HTML code here..." 
                      style="width: 100%; height: 200px; padding: 1rem; border: 1px solid var(--tool-border); border-radius: 4px; font-family: monospace; font-size: 0.9rem;"></textarea>
        </div>

        <div class="input-group">
            <label for="urlInput">Or enter a URL:</label>
            <input type="url" id="urlInput" placeholder="https://example.com" 
                   style="width: 100%; padding: 0.75rem; border: 1px solid var(--tool-border); border-radius: 4px;">
            <div style="font-size: 0.9rem; color: var(--tool-text-secondary); margin-top: 0.5rem;">
                Note: Cross-origin URLs may not work due to CORS restrictions
            </div>
        </div>

        <div id="controlsContainer" style="margin-top: 2rem;">
            <h3>Image Settings</h3>
            
            <div class="input-group">
                <label for="outputFormat">Output Format:</label>
                <select id="outputFormat" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    <option value="png">PNG (Lossless)</option>
                    <option value="jpeg">JPEG</option>
                    <option value="webp">WebP</option>
                </select>
            </div>

            <div id="jpegQualityContainer" style="display: none;">
                <div class="input-group">
                    <label for="jpegQuality">Quality: <span id="qualityValue">85</span>%</label>
                    <input type="range" id="jpegQuality" min="1" max="100" value="85" 
                           style="width: 100%; max-width: 300px;">
                </div>
            </div>

            <div class="input-group">
                <label for="scale">Image Scale:</label>
                <select id="scale" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    <option value="1">1x (Standard)</option>
                    <option value="2" selected>2x (High Quality)</option>
                    <option value="3">3x (Very High Quality)</option>
                </select>
                <div style="font-size: 0.9rem; color: var(--tool-text-secondary); margin-top: 0.5rem;">
                    Higher scale = better quality but larger file size
                </div>
            </div>

            <div class="input-group">
                <label>
                    <input type="checkbox" id="includeBackground" checked>
                    Include background colors/images
                </label>
            </div>

            <div class="input-group">
                <label for="width">Custom Width (px, optional):</label>
                <input type="number" id="width" min="100" max="4000" placeholder="Auto" 
                       style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 150px;">
            </div>
        </div>

        <div id="previewContainer" style="display: none; margin-top: 2rem;">
            <h3>Preview</h3>
            <div style="border: 2px solid var(--tool-border); border-radius: 8px; padding: 1rem; margin-top: 1rem; background: white; min-height: 200px;" id="previewArea"></div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="previewBtn" class="btn btn-secondary">
                Preview
            </button>
            <button id="convertBtn" class="btn btn-primary">
                Convert to Image
            </button>
            <button id="clearBtn" class="btn btn-secondary">
                Clear
            </button>
        </div>

        <div id="progressContainer" style="display: none; margin-top: 1.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;">Converting to image...</div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
            <div id="progressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);">Please wait...</div>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Convert HTML code to images</li>
            <li>Capture web pages (within CORS limits)</li>
            <li>Multiple output formats (PNG, JPEG, WebP)</li>
            <li>Quality and scale controls</li>
            <li>Custom width settings</li>
            <li>Preserve styles and formatting</li>
            <li>Include background colors/images</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline (for HTML input)</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" 
        integrity="sha384-cJEOHCu0J4YVr8LQxgWK3X0kWmNVL8HTvdV1vJwwoRg/F1yJ7PcWLy4Rb0E9jZ8B" 
        crossorigin="anonymous"></script>
<script src="tool.js"></script>