{"id":643,"date":"2025-02-23T08:02:11","date_gmt":"2025-02-23T08:02:11","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=643"},"modified":"2025-03-12T21:42:34","modified_gmt":"2025-03-12T21:42:34","slug":"pdf-to-png-file-converter","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/pdf-to-png-file-converter\/","title":{"rendered":"PDF to PNG File Converter"},"content":{"rendered":"\n<p>Stuff<\/p>\n\n\n\n<div class=\"pdf-to-png-converter-container\">\n  <div id=\"dropArea\" class=\"drop-area\">\n    <p id=\"dropAreaText\">Drag &#038; Drop your PDF file here or<\/p>\n    <input type=\"file\" id=\"fileInput\" accept=\"application\/pdf\" style=\"display: none;\">\n    <button id=\"browseBtn\">Select File<\/button>\n  <\/div>\n  <button id=\"convertBtn\">Convert to PNG<\/button>\n  <button id=\"cancelBtn\" style=\"display:none;\">Cancel<\/button>\n  <div id=\"progressContainer\" class=\"progress-container\">\n    <div id=\"progressBar\" class=\"progress-bar\"><\/div>\n  <\/div>\n  <span id=\"progressPercent\" class=\"progress-percent\">0%<\/span>\n  <a id=\"downloadLink\" style=\"display:none;\">Save PNG<\/a>\n  <canvas id=\"canvas\" style=\"display:none;\"><\/canvas>\n<\/div>\n\n<style>\n  .pdf-to-png-converter-container {\n    text-align: center;\n    background: white;\n    padding: 20px;\n    border-radius: 8px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    width: 90%;\n    max-width: 500px;\n    box-sizing: border-box;\n    margin: 20px 0;\n    margin-left: 0;\n  }\n\n  .pdf-to-png-converter-container input[type=\"file\"] {\n    margin: 20px 0;\n  }\n\n  .pdf-to-png-converter-container button,\n  .pdf-to-png-converter-container a {\n    padding: 10px 20px;\n    font-size: 16px;\n    cursor: pointer;\n    border: none;\n    background-color: #007bff;\n    color: white;\n    border-radius: 5px;\n    margin: 10px;\n    text-decoration: none;\n    display: inline-block;\n    text-align: center;\n  }\n\n  .pdf-to-png-converter-container button:hover,\n  .pdf-to-png-converter-container a:hover {\n    background-color: #0056b3;\n  }\n\n  .progress-container {\n    width: 100%;\n    background-color: #e0e0e0;\n    border-radius: 5px;\n    margin: 20px 0;\n    height: 20px;\n    display: none;\n    position: relative;\n  }\n\n  .progress-bar {\n    width: 0;\n    height: 100%;\n    background-color: #007bff;\n    border-radius: 5px;\n    transition: width 0.3s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-weight: bold;\n    font-size: 14px;\n    overflow: hidden;\n  }\n\n  .progress-percent {\n    display: block;\n    width: 100%;\n    text-align: center;\n    margin-top: 5px;\n    color: black;\n    font-weight: bold;\n  }\n\n  .drop-area {\n    border: 2px dashed #007bff;\n    border-radius: 5px;\n    padding: 20px;\n    cursor: pointer;\n  }\n\n  .drop-area p {\n    margin: 0;\n    font-size: 16px;\n    color: #007bff;\n  }\n\n  @media (max-width: 600px) {\n    .pdf-to-png-converter-container {\n      padding: 10px;\n    }\n\n    .pdf-to-png-converter-container button,\n    .pdf-to-png-converter-container a {\n      padding: 10px;\n      font-size: 14px;\n    }\n  }\n<\/style>\n\n<!-- PDF.js Library -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.min.js\"><\/script>\n<script>\n  \/\/ Set the PDF.js worker source\n  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.worker.min.js';\n\n  document.addEventListener('DOMContentLoaded', function() {\n    const fileInput = document.getElementById('fileInput');\n    const dropArea = document.getElementById('dropArea');\n    const dropAreaText = document.getElementById('dropAreaText');\n    const browseBtn = document.getElementById('browseBtn');\n    const convertBtn = document.getElementById('convertBtn');\n    const cancelBtn = document.getElementById('cancelBtn');\n    const progressContainer = document.getElementById('progressContainer');\n    const progressBar = document.getElementById('progressBar');\n    const progressPercent = document.getElementById('progressPercent');\n    const downloadLink = document.getElementById('downloadLink');\n    const canvas = document.getElementById('canvas');\n    const ctx = canvas.getContext('2d');\n\n    let pngDataUrl = '';\n\n    \/\/ Trigger file input when browse button is clicked\n    browseBtn.addEventListener('click', () => fileInput.click());\n\n    \/\/ Drag and Drop events\n    dropArea.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      dropArea.classList.add('dragover');\n    });\n\n    dropArea.addEventListener('dragleave', () => {\n      dropArea.classList.remove('dragover');\n    });\n\n    dropArea.addEventListener('drop', (e) => {\n      e.preventDefault();\n      dropArea.classList.remove('dragover');\n      fileInput.files = e.dataTransfer.files;\n      if (fileInput.files.length > 0) {\n        dropAreaText.textContent = `Selected file: ${fileInput.files[0].name}`;\n        cancelBtn.style.display = 'inline-block';\n      }\n    });\n\n    \/\/ Update drop area text when a file is selected via file input\n    fileInput.addEventListener('change', () => {\n      if (fileInput.files.length > 0) {\n        dropAreaText.textContent = `Selected file: ${fileInput.files[0].name}`;\n        cancelBtn.style.display = 'inline-block';\n      }\n    });\n\n    \/\/ Cancel: reset UI elements\n    cancelBtn.addEventListener('click', () => {\n      fileInput.value = '';\n      dropAreaText.textContent = 'Drag & Drop your PDF file here or';\n      cancelBtn.style.display = 'none';\n      downloadLink.style.display = 'none';\n      progressContainer.style.display = 'none';\n      progressBar.style.width = '0%';\n      progressBar.textContent = '';\n      progressPercent.textContent = '0%';\n    });\n\n    \/\/ Convert PDF to PNG on button click\n    convertBtn.addEventListener('click', () => {\n      const file = fileInput.files[0];\n      if (!file || file.type !== 'application\/pdf') {\n        alert('Please upload a valid PDF file.');\n        return;\n      }\n\n      \/\/ Show progress container and reset progress\n      progressContainer.style.display = 'block';\n      progressBar.style.width = '0%';\n      progressPercent.textContent = '0%';\n\n      const fileReader = new FileReader();\n      fileReader.onload = function(e) {\n        const typedarray = new Uint8Array(e.target.result);\n        pdfjsLib.getDocument(typedarray).promise.then(pdf => {\n          \/\/ Get the first page of the PDF\n          pdf.getPage(1).then(page => {\n            const viewport = page.getViewport({ scale: 1 });\n            canvas.width = viewport.width;\n            canvas.height = viewport.height;\n\n            const renderContext = {\n              canvasContext: ctx,\n              viewport: viewport\n            };\n\n            \/\/ Render the PDF page into the canvas\n            page.render(renderContext).promise.then(() => {\n              \/\/ Simulate progress update\n              let progress = 0;\n              const progressInterval = setInterval(() => {\n                progress += 20;\n                progressBar.style.width = progress + '%';\n                progressPercent.textContent = progress + '%';\n                if (progress >= 100) {\n                  clearInterval(progressInterval);\n                  \/\/ Once complete, get PNG data from the canvas\n                  pngDataUrl = canvas.toDataURL('image\/png');\n                  downloadLink.href = pngDataUrl;\n                  downloadLink.download = 'converted.png';\n                  downloadLink.style.display = 'inline-block';\n                  downloadLink.textContent = 'Save PNG';\n                }\n              }, 300);\n            });\n          });\n        }).catch(error => {\n          alert('Error processing PDF: ' + error.message);\n        });\n      };\n      fileReader.readAsArrayBuffer(file);\n    });\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Stuff Drag &#038; Drop your PDF file here or Select File Convert to PNG Cancel 0% Save PNG<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-643","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/comments?post=643"}],"version-history":[{"count":1,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/643\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/643\/revisions\/644"}],"up":[{"embeddable":true,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/230"}],"wp:attachment":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/media?parent=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}