{"id":635,"date":"2025-02-23T07:40:34","date_gmt":"2025-02-23T07:40:34","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=635"},"modified":"2025-03-12T21:42:49","modified_gmt":"2025-03-12T21:42:49","slug":"png-to-pdf-file-converter","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/png-to-pdf-file-converter\/","title":{"rendered":"PNG to PDF File Converter"},"content":{"rendered":"\n<p>stuff<\/p>\n\n\n\n<div class=\"png-to-jpg-converter-container\">\n  <div id=\"dropArea\" class=\"drop-area\">\n    <p id=\"dropAreaText\">Drag &#038; Drop your PNG file here or<\/p>\n    <input type=\"file\" id=\"fileInput\" accept=\"image\/png\" style=\"display: none;\">\n    <button id=\"browseBtn\">Select File<\/button>\n  <\/div>\n  <button id=\"convertBtn\">Convert to PDF<\/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 PDF<\/a>\n<\/div>\n\n<style>\n  .png-to-jpg-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  .png-to-jpg-converter-container input[type=\"file\"] {\n    margin: 20px 0;\n  }\n\n  .png-to-jpg-converter-container button,\n  .png-to-jpg-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  .png-to-jpg-converter-container button:hover,\n  .png-to-jpg-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    .png-to-jpg-converter-container {\n      padding: 10px;\n    }\n    \n    .png-to-jpg-converter-container button,\n    .png-to-jpg-converter-container a {\n      padding: 10px;\n      font-size: 14px;\n    }\n  }\n<\/style>\n\n<!-- jsPDF Library -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<script>\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    \n    let pdfBlobUrl = '';\n\n    \/\/ Trigger file input via browse button\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\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 functionality: reset UI elements\n    cancelBtn.addEventListener('click', () => {\n      fileInput.value = '';\n      dropAreaText.textContent = 'Drag & Drop your PNG 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 PNG to PDF on button click\n    convertBtn.addEventListener('click', () => {\n      const file = fileInput.files[0];\n      if (!file || file.type !== 'image\/png') {\n        alert('Please upload a valid PNG 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 reader = new FileReader();\n      reader.onload = (e) => {\n        const img = new Image();\n        img.src = e.target.result;\n        img.onload = () => {\n          \/\/ Start a simulated progress update\n          let progress = 0;\n          const interval = setInterval(() => {\n            progress += 20;\n            progressBar.style.width = progress + '%';\n            progressPercent.textContent = progress + '%';\n            if (progress >= 100) {\n              clearInterval(interval);\n              \/\/ Once progress completes, create the PDF\n              const { jsPDF } = window.jspdf;\n              const pdf = new jsPDF('portrait', 'mm', 'a4');\n              const pageWidth = pdf.internal.pageSize.getWidth();\n              const pageHeight = pdf.internal.pageSize.getHeight();\n\n              \/\/ Convert image dimensions from pixels to mm (1px \u2248 0.264583 mm)\n              let imgWidth = img.width * 0.264583;\n              let imgHeight = img.height * 0.264583;\n              const ratio = Math.min(pageWidth \/ imgWidth, pageHeight \/ imgHeight);\n              const width = imgWidth * ratio;\n              const height = imgHeight * ratio;\n              const x = (pageWidth - width) \/ 2;\n              const y = (pageHeight - height) \/ 2;\n              \n              pdf.addImage(e.target.result, 'PNG', x, y, width, height);\n              const pdfBlob = pdf.output('blob');\n              pdfBlobUrl = URL.createObjectURL(pdfBlob);\n\n              downloadLink.href = pdfBlobUrl;\n              downloadLink.download = 'converted.pdf';\n              downloadLink.style.display = 'inline-block';\n              downloadLink.textContent = 'Save PDF';\n            }\n          }, 300);\n        };\n      };\n      reader.readAsDataURL(file);\n    });\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>stuff Drag &#038; Drop your PNG file here or Select File Convert to PDF Cancel 0% Save PDF<\/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-635","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/635","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=635"}],"version-history":[{"count":4,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/635\/revisions"}],"predecessor-version":[{"id":642,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/635\/revisions\/642"}],"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=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}