{"id":437,"date":"2026-07-14T18:04:14","date_gmt":"2026-07-14T18:04:14","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=437"},"modified":"2026-07-14T18:07:51","modified_gmt":"2026-07-14T18:07:51","slug":"image-to-pdf","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/image-to-pdf\/","title":{"rendered":"Image to Pdf"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Media Converter Pro<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.4.120\/pdf.min.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n    <style>\n        .converter-app { font-family: sans-serif; max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }\n        .tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #eee; }\n        .tab-btn { padding: 10px 20px; border: none; background: none; cursor: pointer; font-weight: bold; color: #888; }\n        .tab-btn.active { color: #007bff; border-bottom: 2px solid #007bff; }\n        .tab-content { display: none; }\n        .tab-content.active { display: block; }\n        .drop-zone { border: 2px dashed #007bff; padding: 40px; text-align: center; cursor: pointer; position: relative; background: #f9f9f9; }\n        .drop-zone.drag-over { background: #eefbff; }\n        .preview-area { margin: 20px 0; min-height: 100px; border: 1px solid #ddd; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; }\n        .preview-item { width: 80px; height: 80px; object-fit: cover; }\n        .action-btn { width: 100%; padding: 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }\n        .action-btn:disabled { background: #ccc; }\n        #status-bar { margin-top: 15px; font-size: 14px; color: #555; text-align: center; }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"converter-app\">\n    <div class=\"tabs\">\n        <button class=\"tab-btn active\" data-target=\"img-to-pdf\">Image to PDF<\/button>\n        <button class=\"tab-btn\" data-target=\"pdf-to-img\">PDF to Image<\/button>\n    <\/div>\n\n    <section id=\"img-to-pdf\" class=\"tab-content active\">\n        <div class=\"drop-zone\" id=\"img-drop-zone\">Click to select or Drop Images\n            <input type=\"file\" id=\"img-input\" multiple accept=\"image\/*\" style=\"display:none\">\n        <\/div>\n        <div class=\"preview-area\" id=\"img-preview\"><\/div>\n        <button class=\"action-btn\" id=\"convert-to-pdf-btn\" disabled>Convert to PDF<\/button>\n    <\/section>\n\n    <section id=\"pdf-to-img\" class=\"tab-content\">\n        <div class=\"drop-zone\" id=\"pdf-drop-zone\">Click to select or Drop PDF\n            <input type=\"file\" id=\"pdf-input\" accept=\"application\/pdf\" style=\"display:none\">\n        <\/div>\n        <div class=\"preview-area\" id=\"pdf-preview\"><\/div>\n        <button class=\"action-btn\" id=\"convert-to-img-btn\" disabled>Convert to Images<\/button>\n    <\/section>\n\n    <div id=\"status-bar\">Ready<\/div>\n<\/div>\n\n<script>\n    const state = { selectedImages: [], selectedPdf: null };\n    const dom = {\n        imgDropZone: document.getElementById('img-drop-zone'), imgInput: document.getElementById('img-input'),\n        imgPreview: document.getElementById('img-preview'), convertToPdfBtn: document.getElementById('convert-to-pdf-btn'),\n        pdfDropZone: document.getElementById('pdf-drop-zone'), pdfInput: document.getElementById('pdf-input'),\n        pdfPreview: document.getElementById('pdf-preview'), convertToImgBtn: document.getElementById('convert-to-img-btn'),\n        statusBar: document.getElementById('status-bar')\n    };\n\n    function updateStatus(msg) { dom.statusBar.textContent = msg; }\n    function triggerDownload(blob, name) {\n        const url = URL.createObjectURL(blob);\n        const a = document.createElement('a');\n        a.href = url; a.download = name; a.click();\n        URL.revokeObjectURL(url);\n    }\n\n    function setupZone(zone, input, isImg) {\n        zone.addEventListener('click', () => input.click());\n        ['dragover', 'drop'].forEach(e => zone.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); }));\n        zone.addEventListener('dragover', () => zone.classList.add('drag-over'));\n        ['dragleave', 'drop'].forEach(e => zone.addEventListener(e, () => zone.classList.remove('drag-over')));\n        zone.addEventListener('drop', e => { input.files = e.dataTransfer.files; input.dispatchEvent(new Event('change')); });\n    }\n\n    setupZone(dom.imgDropZone, dom.imgInput);\n    setupZone(dom.pdfDropZone, dom.pdfInput);\n\n    dom.imgInput.addEventListener('change', e => {\n        state.selectedImages = Array.from(e.target.files);\n        dom.imgPreview.innerHTML = '';\n        state.selectedImages.forEach(f => {\n            const reader = new FileReader();\n            reader.onload = e => { const img = document.createElement('img'); img.src = e.target.result; img.className = 'preview-item'; dom.imgPreview.appendChild(img); };\n            reader.readAsDataURL(f);\n        });\n        dom.convertToPdfBtn.disabled = false;\n        updateStatus(state.selectedImages.length + \" images ready.\");\n    });\n\n    dom.pdfInput.addEventListener('change', e => {\n        state.selectedPdf = e.target.files[0];\n        dom.pdfPreview.textContent = \"Selected: \" + state.selectedPdf.name;\n        dom.convertToImgBtn.disabled = false;\n        updateStatus(\"PDF ready.\");\n    });\n\n    document.querySelectorAll('.tab-btn').forEach(btn => btn.addEventListener('click', () => {\n        document.querySelectorAll('.tab-btn, .tab-content').forEach(el => el.classList.remove('active'));\n        btn.classList.add('active');\n        document.getElementById(btn.dataset.target).classList.add('active');\n    }));\n\n    dom.convertToPdfBtn.addEventListener('click', async () => {\n        updateStatus(\"Converting...\");\n        const { jsPDF } = window.jspdf;\n        const pdf = new jsPDF();\n        for(let i=0; i<state.selectedImages.length; i++) {\n            if(i > 0) pdf.addPage();\n            const data = await new Promise(r => { const fr = new FileReader(); fr.onload = () => r(fr.result); fr.readAsDataURL(state.selectedImages[i]); });\n            pdf.addImage(data, 'JPEG', 10, 10, 180, 150);\n        }\n        triggerDownload(pdf.output('blob'), \"converted.pdf\");\n        updateStatus(\"Done!\");\n    });\n\n    dom.convertToImgBtn.addEventListener('click', async () => {\n        updateStatus(\"Converting...\");\n        const data = await new Promise(r => { const fr = new FileReader(); fr.onload = () => r(fr.result); fr.readAsArrayBuffer(state.selectedPdf); });\n        const pdf = await pdfjsLib.getDocument({data}).promise;\n        for(let i=1; i<=pdf.numPages; i++) {\n            const page = await pdf.getPage(i);\n            const vp = page.getViewport({scale: 2});\n            const canvas = document.createElement('canvas');\n            canvas.width = vp.width; canvas.height = vp.height;\n            await page.render({canvasContext: canvas.getContext('2d'), viewport: vp}).promise;\n            canvas.toBlob(b => triggerDownload(b, \"page_\" + i + \".png\"));\n        }\n        updateStatus(\"Done!\");\n    });\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Media Converter Pro Image to PDF PDF to Image Click to select or Drop Images Convert to PDF Click to select or Drop PDF Convert to Images Ready<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-437","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":2,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions"}],"predecessor-version":[{"id":439,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions\/439"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}