{"id":207,"date":"2025-03-21T01:39:36","date_gmt":"2025-03-21T01:39:36","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=207"},"modified":"2025-03-22T05:28:05","modified_gmt":"2025-03-22T05:28:05","slug":"png-to-jpg-converter","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/png-to-jpg-converter\/","title":{"rendered":"PNG to JPG Converter"},"content":{"rendered":"\n<p>Converts files from PNG to JPG. <br><\/p>\n\n\n\n<div class=\"png-to-jpg-converter-container\">\n \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 JPG<\/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 JPG<\/a>\n  <canvas id=\"canvas\" style=\"display:none;\"><\/canvas>\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\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: lightgrey;\n    color: black;\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: grey;\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: #260b24;\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 black;\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: black;\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<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 downloadLink = document.getElementById('downloadLink');\n    const progressContainer = document.getElementById('progressContainer');\n    const progressBar = document.getElementById('progressBar');\n    const progressPercent = document.getElementById('progressPercent');\n\n    browseBtn.addEventListener('click', () => fileInput.click());\n\n    dropArea.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      dropArea.classList.add('dragover');\n    });\n\n    dropArea.addEventListener('dragleave', () => dropArea.classList.remove('dragover'));\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    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    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    convertBtn.addEventListener('click', () => {\n      const file = fileInput.files[0];\n      if (file && file.type === 'image\/png') {\n        const canvas = document.getElementById('canvas');\n        const ctx = canvas.getContext('2d');\n        const img = new Image();\n\n        progressContainer.style.display = 'block';\n        progressBar.style.width = '0%';\n        progressPercent.textContent = '0%';\n\n        img.onload = () => {\n          canvas.width = img.width;\n          canvas.height = img.height;\n          ctx.drawImage(img, 0, 0);\n\n          \/\/ Simulate progress\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              const jpgUrl = canvas.toDataURL('image\/jpeg', 1.0);\n\n              downloadLink.href = jpgUrl;\n              downloadLink.download = 'converted.jpg';\n              downloadLink.style.display = 'inline-block';\n              downloadLink.textContent = 'Save JPG';\n            }\n          }, 300);\n        };\n\n        const reader = new FileReader();\n        reader.onload = (e) => {\n          img.src = e.target.result;\n        };\n        reader.readAsDataURL(file);\n      } else {\n        alert('Please upload a valid PNG file.');\n      }\n    });\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Converts files from PNG to JPG. Drag &#038; Drop your PNG file here or Select File Convert to JPG Cancel 0% Save JPG<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":81,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-207","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":7,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/207\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/207\/revisions\/238"}],"up":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/81"}],"wp:attachment":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/media?parent=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}