{"id":447,"date":"2024-07-06T08:07:47","date_gmt":"2024-07-06T07:07:47","guid":{"rendered":"https:\/\/divbydev.com\/?page_id=447"},"modified":"2024-07-10T06:53:05","modified_gmt":"2024-07-10T05:53:05","slug":"png-to-jpg-converter","status":"publish","type":"page","link":"https:\/\/divbydev.com\/index.php\/projects-2\/png-to-jpg-converter\/","title":{"rendered":"PNG to JPG Converter"},"content":{"rendered":"\n<p>The PNG to JPG Converter allows you to easily convert PNG files to JPG format. Simply upload a PNG file, convert it using the provided button, and save the converted JPG file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use Cases<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Web Optimization<\/strong>: Convert PNG images to JPG to reduce file size and improve website load times.<\/li>\n\n\n\n<li><strong>Compatibility<\/strong>: Ensure your images are in a universally supported format for use across different platforms and devices.<\/li>\n\n\n\n<li><strong>Storage Management<\/strong>: Save storage space by converting larger PNG files to more space-efficient JPG files.<\/li>\n<\/ol>\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  .site-header .header-image {\n      display: flex;\n      justify-content: flex-start;\n      width: 100px;\n      max-width: 100%; \/* Ensure the logo scales properly *\/\n      height: 100px;\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<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>The PNG to JPG Converter allows you to easily convert PNG files to JPG format. Simply upload a PNG file, convert it using the provided button, and save the converted JPG file. Use Cases 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":230,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-447","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/447","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=447"}],"version-history":[{"count":8,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/447\/revisions"}],"predecessor-version":[{"id":496,"href":"https:\/\/divbydev.com\/index.php\/wp-json\/wp\/v2\/pages\/447\/revisions\/496"}],"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=447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}