Image to PDF Converter Source Code (HTML, CSS, JS)

Live Preview

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to PDF Converter - Image PDF Tools</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4">
            <div class="flex justify-between items-center">
                <a href="#" class="flex items-center">
                    <span class="text-2xl font-bold text-blue-600">Image2PDF</span>
                </a>
                <nav class="hidden md:flex space-x-6">
                    <a href="#" class="hover:text-blue-600 transition">About Us</a>
                    <a href="#" class="hover:text-blue-600 transition">Contact Us</a>
                    <a href="#" class="hover:text-blue-600 transition">Privacy Policy</a>
                    <a href="#" class="hover:text-blue-600 transition">Terms & Conditions</a>
                </nav>
                <button id="mobile-menu-button" class="md:hidden">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
            <!-- Mobile Menu -->
            <div id="mobile-menu" class="md:hidden hidden mt-4 pb-2">
                <a href="#" class="block py-2 hover:text-blue-600 transition">About Us</a>
                <a href="#" class="block py-2 hover:text-blue-600 transition">Contact Us</a>
                <a href="#" class="block py-2 hover:text-blue-600 transition">Privacy Policy</a>
                <a href="#" class="block py-2 hover:text-blue-600 transition">Terms & Conditions</a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-12">
        <div class="tool-container">
            <div class="tool-header">
                <h1 class="text-3xl font-bold mb-4">Image to PDF Converter</h1>
                <p class="text-gray-600">Convert your images to PDF format with ease. Supports JPG, PNG, GIF, and other image formats.</p>
            </div>
            
            <div class="tool-description">
                <p>This free online tool allows you to convert your image files to PDF format. You can upload multiple images and arrange them in any order before converting. The conversion happens directly in your browser, ensuring your files never leave your computer.</p>
            </div>
            
            <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                <h2 class="text-xl font-bold mb-4">Upload Images</h2>
                
                <!-- File Upload Area -->
                <div id="drop-area" class="drop-zone mb-6">
                    <div class="text-center">
                        <i class="fas fa-cloud-upload-alt text-4xl text-blue-600 mb-4"></i>
                        <p class="mb-4">Drag & drop your images here or</p>
                        <label for="file-input" class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition cursor-pointer">
                            Browse Files
                        </label>
                        <input type="file" id="file-input" class="hidden" accept="image/*" multiple>
                    </div>
                </div>
                
                <!-- Selected Files List -->
                <div id="file-list" class="mb-6 hidden">
                    <h3 class="text-lg font-semibold mb-2">Selected Images</h3>
                    <div id="selected-files" class="space-y-2">
                        <!-- Files will be listed here dynamically -->
                    </div>
                </div>
                
                <!-- Options -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-2">Options</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="page-size" class="block text-sm font-medium text-gray-700 mb-1">Page Size</label>
                            <select id="page-size" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="a4" selected>A4 (210 × 297 mm)</option>
                                <option value="letter">Letter (8.5 × 11 in)</option>
                                <option value="legal">Legal (8.5 × 14 in)</option>
                                <option value="a3">A3 (297 × 420 mm)</option>
                                <option value="a5">A5 (148 × 210 mm)</option>
                                <option value="original">Original Size</option>
                            </select>
                        </div>
                        <div>
                            <label for="orientation" class="block text-sm font-medium text-gray-700 mb-1">Orientation</label>
                            <select id="orientation" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="portrait" selected>Portrait</option>
                                <option value="landscape">Landscape</option>
                                <option value="auto">Auto (Based on image)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <label for="margin" class="block text-sm font-medium text-gray-700 mb-1">Margin (mm)</label>
                        <input type="number" id="margin" min="0" max="50" value="10" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    
                    <div class="mt-4">
                        <label class="flex items-center">
                            <input type="checkbox" id="compress-images" class="rounded text-blue-600 focus:ring-blue-500 h-4 w-4">
                            <span class="ml-2 text-sm text-gray-700">Compress images (reduces file size)</span>
                        </label>
                    </div>
                </div>
                
                <!-- Convert Button -->
                <div class="text-center">
                    <button id="convert-btn" class="bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fas fa-file-pdf mr-2"></i>Convert to PDF
                    </button>
                </div>
            </div>
            
            <!-- Result Section (Initially Hidden) -->
            <div id="result-section" class="bg-white rounded-lg shadow-md p-6 mb-8 hidden">
                <h2 class="text-xl font-bold mb-4">Your PDF is Ready!</h2>
                
                <div class="text-center mb-6">
                    <i class="fas fa-file-pdf text-6xl text-blue-600 mb-4"></i>
                    <p class="text-lg font-semibold mb-2" id="result-filename">document.pdf</p>
                    <p class="text-sm text-gray-600 mb-4" id="result-filesize">0 KB</p>
                </div>
                
                <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                    <a id="download-btn" href="#" class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition text-center">
                        <i class="fas fa-download mr-2"></i>Download PDF
                    </a>
                    <button id="new-conversion-btn" class="bg-gray-200 text-gray-800 py-2 px-4 rounded hover:bg-gray-300 transition">
                        <i class="fas fa-redo mr-2"></i>New Conversion
                    </button>
                </div>
            </div>
            
            <!-- How It Works Section -->
            <div class="mb-8">
                <h2 class="text-2xl font-bold mb-4">How It Works</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="text-center">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                                <span class="text-xl font-bold">1</span>
                            </div>
                            <h3 class="text-lg font-bold mb-2">Upload Images</h3>
                            <p class="text-gray-600">Select the image files you want to convert from your device.</p>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="text-center">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                                <span class="text-xl font-bold">2</span>
                            </div>
                            <h3 class="text-lg font-bold mb-2">Adjust Settings</h3>
                            <p class="text-gray-600">Choose your preferred page size, orientation, and other options.</p>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="text-center">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                                <span class="text-xl font-bold">3</span>
                            </div>
                            <h3 class="text-lg font-bold mb-2">Download PDF</h3>
                            <p class="text-gray-600">Get your converted PDF file instantly.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- FAQ Section -->
            <div>
                <h2 class="text-2xl font-bold mb-4">Frequently Asked Questions</h2>
                <div class="space-y-4">
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-bold mb-2">Is this service completely free?</h3>
                        <p class="text-gray-600">Yes, our Image to PDF converter is completely free to use with no hidden costs or limitations.</p>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-bold mb-2">Are my files secure?</h3>
                        <p class="text-gray-600">Absolutely. All processing happens directly in your browser. Your files never leave your computer, ensuring maximum security and privacy.</p>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-bold mb-2">What image formats are supported?</h3>
                        <p class="text-gray-600">Our tool supports all common image formats including JPG, JPEG, PNG, GIF, BMP, WEBP, and TIFF.</p>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-bold mb-2">Is there a limit to how many images I can convert?</h3>
                        <p class="text-gray-600">There's no hard limit, but we recommend keeping the total number of images under 100 for optimal performance.</p>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h3 class="text-lg font-bold mb-2">Can I rearrange the order of images?</h3>
                        <p class="text-gray-600">Yes, you can drag and drop the images in the file list to rearrange their order before conversion.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-xl font-bold mb-4">All PDF Tools</h4>
                    <p class="text-gray-400">Free online PDF tools to convert, edit, and manage your PDF files.</p>
                </div>
                
                <div>
                    <h4 class="text-xl font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="../index.html#convert-to-pdf" class="text-gray-400 hover:text-white transition">Convert to PDF</a></li>
                        <li><a href="../index.html#convert-from-pdf" class="text-gray-400 hover:text-white transition">Convert from PDF</a></li>
                        <li><a href="../index.html#other-tools" class="text-gray-400 hover:text-white transition">Other Tools</a></li>
                        <li><a href="../index.html#about" class="text-gray-400 hover:text-white transition">About</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-xl font-bold mb-4">Popular Tools</h4>
                    <ul class="space-y-2">
                        <li><a href="merge-pdf.html" class="text-gray-400 hover:text-white transition">Merge PDF</a></li>
                        <li><a href="compress-pdf.html" class="text-gray-400 hover:text-white transition">Compress PDF</a></li>
                        <li><a href="image-to-pdf.html" class="text-gray-400 hover:text-white transition">Image to PDF</a></li>
                        <li><a href="pdf-to-word.html" class="text-gray-400 hover:text-white transition">PDF to Word</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-xl font-bold mb-4">Legal</h4>
                    <ul class="space-y-2">
                        <li><a href="../privacy-policy.html" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
                        <li><a href="../terms-of-service.html" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 Image2PDF Tools. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

/* Custom styles beyond Tailwind CSS */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom transitions */
.transition {
    transition: all 0.3s ease;
}

/* Custom focus styles */
button:focus, a:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

/* Tool card hover effect */
.hover\:shadow-lg:hover {
    transform: translateY(-5px);
}

/* Custom animation for loading */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Print styles */
@media print {
    header, footer, .no-print {
        display: none;
    }
    
    body {
        background: white;
    }
    
    main {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* Custom file input styling */
.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}

.custom-file-input::before {
    content: 'Select files';
    display: inline-block;
    background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}

.custom-file-input:hover::before {
    border-color: black;
}

.custom-file-input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* SEO optimization - hiding elements with display:none can be problematic for SEO */
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Drag and drop zone styling */
.drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.3s ease;
}

.drop-zone.active {
    border-color: #2563eb;
    background-color: rgba(37, 99, 235, 0.05);
}

/* Progress bar styling */
.progress-bar {
    height: 8px;
    background-color: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: #2563eb;
    transition: width 0.3s ease;
}

/* Tool page specific styles */
.tool-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.tool-header {
    margin-bottom: 2rem;
    text-align: center;
}

.tool-description {
    margin-bottom: 2rem;
    color: #4b5563;
}

.tool-steps {
    margin-bottom: 2rem;
}

.tool-result {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #f3f4f6;
}


@media (max-width: 640px) {
    .tool-container {
        padding: 0;
    }
}

// Detect browser support for features
const featureSupport = {
    webp: false,
    webgl: false,
    webworkers: 'Worker' in window,
    touchscreen: 'ontouchstart' in window
};

// Check WebP support
(function() {
    const webP = new Image();
    webP.onload = function() { featureSupport.webp = (webP.height === 1); };
    webP.onerror = function() { featureSupport.webp = false; };
    webP.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
})();

// Check WebGL support
try {
    const canvas = document.createElement('canvas');
    featureSupport.webgl = !!(window.WebGLRenderingContext && 
        (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
} catch (e) {
    featureSupport.webgl = false;
}

// Print feature support to console
console.log('Feature support:', featureSupport);

// Utility function for downloading files
window.downloadFile = function(blob, filename) {
    // Create a temporary anchor element
    const a = document.createElement('a');
    
    // Create a blob URL
    const url = URL.createObjectURL(blob);
    
    // Set anchor properties
    a.href = url;
    a.download = filename;
    a.style.display = 'none';
    
    // Add to document, click, and remove
    document.body.appendChild(a);
    a.click();
    
    // Clean up
    setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }, 100);
}; 


// Image to PDF Converter Script
document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-input');
    const fileList = document.getElementById('file-list');
    const selectedFiles = document.getElementById('selected-files');
    const convertBtn = document.getElementById('convert-btn');
    const resultSection = document.getElementById('result-section');
    const resultFilename = document.getElementById('result-filename');
    const resultFilesize = document.getElementById('result-filesize');
    const downloadBtn = document.getElementById('download-btn');
    const newConversionBtn = document.getElementById('new-conversion-btn');
    
    // Options Elements
    const pageSize = document.getElementById('page-size');
    const orientation = document.getElementById('orientation');
    const margin = document.getElementById('margin');
    const compressImages = document.getElementById('compress-images');
    
    // Variables
    let uploadedFiles = [];
    let pdfOutput = null;
    let pdfBlob = null;
    
    // Initialize drag and drop
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });
    
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });
    
    function highlight() {
        dropArea.classList.add('active');
    }
    
    function unhighlight() {
        dropArea.classList.remove('active');
    }
    
    // Handle dropped files
    dropArea.addEventListener('drop', handleDrop, false);
    
    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }
    
    // Handle file input change
    fileInput.addEventListener('change', function() {
        handleFiles(this.files);
    });
    
    // Process the files
    function handleFiles(files) {
        if (files.length === 0) return;
        
        // Filter only image files
        const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
        
        if (imageFiles.length === 0) {
            alert('Please select valid image files (JPG, PNG, GIF, etc.)');
            return;
        }
        
        // Add to uploaded files array
        imageFiles.forEach(file => {
            // Check if file already exists in the array
            if (!uploadedFiles.some(f => f.name === file.name && f.size === file.size)) {
                uploadedFiles.push(file);
            }
        });
        
        // Update UI
        updateFileList();
        
        // Enable convert button if files are uploaded
        if (uploadedFiles.length > 0) {
            convertBtn.disabled = false;
        }
    }
    
    // Update the file list UI
    function updateFileList() {
        // Show file list section
        fileList.classList.remove('hidden');
        
        // Clear the list
        selectedFiles.innerHTML = '';
        
        // Add each file to the list
        uploadedFiles.forEach((file, index) => {
            const fileItem = document.createElement('div');
            fileItem.className = 'flex items-center justify-between bg-gray-50 p-3 rounded';
            
            // Create thumbnail preview
            const preview = document.createElement('div');
            preview.className = 'flex items-center';
            
            const thumbnail = document.createElement('div');
            thumbnail.className = 'w-10 h-10 mr-3 bg-gray-200 rounded flex items-center justify-center overflow-hidden';
            
            // Create image thumbnail
            const img = document.createElement('img');
            img.className = 'w-full h-full object-cover';
            
            // Read file and set thumbnail
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
            
            thumbnail.appendChild(img);
            
            // File info
            const fileInfo = document.createElement('div');
            fileInfo.className = 'flex flex-col';
            
            const fileName = document.createElement('span');
            fileName.className = 'text-sm font-medium';
            fileName.textContent = file.name;
            
            const fileSize = document.createElement('span');
            fileSize.className = 'text-xs text-gray-500';
            fileSize.textContent = formatFileSize(file.size);
            
            fileInfo.appendChild(fileName);
            fileInfo.appendChild(fileSize);
            
            preview.appendChild(thumbnail);
            preview.appendChild(fileInfo);
            
            // Actions
            const actions = document.createElement('div');
            actions.className = 'flex items-center';
            
            // Move up button
            if (index > 0) {
                const moveUpBtn = document.createElement('button');
                moveUpBtn.className = 'text-gray-500 hover:text-gray-700 mr-2';
                moveUpBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
                moveUpBtn.title = 'Move up';
                moveUpBtn.addEventListener('click', () => moveFile(index, index - 1));
                actions.appendChild(moveUpBtn);
            }
            
            // Move down button
            if (index < uploadedFiles.length - 1) {
                const moveDownBtn = document.createElement('button');
                moveDownBtn.className = 'text-gray-500 hover:text-gray-700 mr-2';
                moveDownBtn.innerHTML = '<i class="fas fa-arrow-down"></i>';
                moveDownBtn.title = 'Move down';
                moveDownBtn.addEventListener('click', () => moveFile(index, index + 1));
                actions.appendChild(moveDownBtn);
            }
            
            // Remove button
            const removeBtn = document.createElement('button');
            removeBtn.className = 'text-red-500 hover:text-red-700';
            removeBtn.innerHTML = '<i class="fas fa-times"></i>';
            removeBtn.title = 'Remove';
            removeBtn.addEventListener('click', () => removeFile(index));
            actions.appendChild(removeBtn);
            
            fileItem.appendChild(preview);
            fileItem.appendChild(actions);
            
            selectedFiles.appendChild(fileItem);
        });
    }
    
    // Format file size
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // Move file in the array
    function moveFile(fromIndex, toIndex) {
        const file = uploadedFiles.splice(fromIndex, 1)[0];
        uploadedFiles.splice(toIndex, 0, file);
        updateFileList();
    }
    
    // Remove file from the array
    function removeFile(index) {
        uploadedFiles.splice(index, 1);
        updateFileList();
        
        // Disable convert button if no files
        if (uploadedFiles.length === 0) {
            convertBtn.disabled = true;
        }
    }
    
    // Convert button click handler
    convertBtn.addEventListener('click', convertToPdf);
    
    // Convert images to PDF
    async function convertToPdf() {
        if (uploadedFiles.length === 0) return;
        
        // Show loading state
        convertBtn.disabled = true;
        convertBtn.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i>Converting...';
        
        try {
            // Get selected options
            const selectedPageSize = pageSize.value;
            const selectedOrientation = orientation.value;
            const selectedMargin = parseInt(margin.value);
            const shouldCompress = compressImages.checked;
            
            // Initialize jsPDF
            const { jsPDF } = window.jspdf;
            
            // Set page size and orientation
            let pdfPageSize;
            let pdfOrientation;
            
            // Set PDF page size
            switch (selectedPageSize) {
                case 'a4':
                    pdfPageSize = 'a4';
                    break;
                case 'letter':
                    pdfPageSize = 'letter';
                    break;
                case 'legal':
                    pdfPageSize = 'legal';
                    break;
                case 'a3':
                    pdfPageSize = 'a3';
                    break;
                case 'a5':
                    pdfPageSize = 'a5';
                    break;
                case 'original':
                    // Will be handled per image
                    pdfPageSize = 'a4'; // Default
                    break;
                default:
                    pdfPageSize = 'a4';
            }
            
            // Set PDF orientation
            if (selectedOrientation === 'portrait') {
                pdfOrientation = 'portrait';
            } else if (selectedOrientation === 'landscape') {
                pdfOrientation = 'landscape';
            } else {
                // Auto orientation will be determined per image
                pdfOrientation = 'portrait'; // Default
            }
            
            // Create PDF document
            const pdf = new jsPDF({
                orientation: pdfOrientation,
                unit: 'mm',
                format: pdfPageSize
            });
            
            // Process each image
            for (let i = 0; i < uploadedFiles.length; i++) {
                const file = uploadedFiles[i];
                
                // Create image element
                const img = new Image();
                
                // Convert file to data URL
                const dataUrl = await readFileAsDataURL(file);
                img.src = dataUrl;
                
                // Wait for image to load
                await new Promise(resolve => {
                    img.onload = resolve;
                });
                
                // Add new page if not the first image
                if (i > 0) {
                    pdf.addPage();
                }
                
                // Determine orientation for this image if auto is selected
                let imgOrientation = pdfOrientation;
                if (selectedOrientation === 'auto') {
                    imgOrientation = img.width > img.height ? 'landscape' : 'portrait';
                    
                    // If orientation differs from current page, add a new page with correct orientation
                    if (i > 0 && imgOrientation !== pdfOrientation) {
                        pdf.deletePage(pdf.getNumberOfPages());
                        pdf.addPage(pdfPageSize, imgOrientation);
                    } else if (i === 0) {
                        // For first page, recreate the PDF with correct orientation
                        pdf = new jsPDF({
                            orientation: imgOrientation,
                            unit: 'mm',
                            format: pdfPageSize
                        });
                    }
                }
                
                // Get page dimensions
                const pageWidth = pdf.internal.pageSize.getWidth();
                const pageHeight = pdf.internal.pageSize.getHeight();
                
                // Calculate image dimensions to fit within page margins
                const maxWidth = pageWidth - (selectedMargin * 2);
                const maxHeight = pageHeight - (selectedMargin * 2);
                
                let imgWidth = img.width;
                let imgHeight = img.height;
                
                // Scale image to fit page
                if (imgWidth > maxWidth || imgHeight > maxHeight) {
                    const ratio = Math.min(maxWidth / imgWidth, maxHeight / imgHeight);
                    imgWidth *= ratio;
                    imgHeight *= ratio;
                }
                
                // Calculate position to center image on page
                const x = (pageWidth - imgWidth) / 2;
                const y = (pageHeight - imgHeight) / 2;
                
                // Add image to PDF
                pdf.addImage(
                    dataUrl,
                    'JPEG',
                    x,
                    y,
                    imgWidth,
                    imgHeight,
                    `image-${i}`,
                    shouldCompress ? 'MEDIUM' : 'NONE'
                );
            }
            
            // Save PDF
            pdfOutput = pdf;
            
            // Generate PDF blob
            pdfBlob = pdf.output('blob');
            
            // Update result section
            resultFilename.textContent = 'images-to-pdf.pdf';
            resultFilesize.textContent = formatFileSize(pdfBlob.size);
            
            // Show result section
            resultSection.classList.remove('hidden');
            
            // Scroll to result section
            resultSection.scrollIntoView({ behavior: 'smooth' });
            
        } catch (error) {
            console.error('Error converting to PDF:', error);
            alert('An error occurred while converting to PDF. Please try again.');
        } finally {
            // Reset convert button
            convertBtn.disabled = false;
            convertBtn.innerHTML = '<i class="fas fa-file-pdf mr-2"></i>Convert to PDF';
        }
    }
    
    // Read file as data URL
    function readFileAsDataURL(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    }
    
    // Download button click handler
    downloadBtn.addEventListener('click', function(e) {
        e.preventDefault();
        if (pdfBlob) {
            window.downloadFile(pdfBlob, 'images-to-pdf.pdf');
        }
    });
    
    // New conversion button click handler
    newConversionBtn.addEventListener('click', function() {
        // Reset everything
        uploadedFiles = [];
        pdfOutput = null;
        pdfBlob = null;
        
        // Reset UI
        fileInput.value = '';
        updateFileList();
        fileList.classList.add('hidden');
        resultSection.classList.add('hidden');
        convertBtn.disabled = true;
        
        // Reset options
        pageSize.value = 'a4';
        orientation.value = 'portrait';
        margin.value = '10';
        compressImages.checked = false;
        
        // Scroll to top
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});

Image to PDF Converter Source Code (HTML, CSS, JS)

About Us

#buttons=(Accept !) #days=(20)

Contact form

Image to PDF Converter Source Code (HTML, CSS, JS)

Related Pages

E-Commerce Landing Page

#buttons=(Accept !) #days=(20)

Contact form