{"id":921,"date":"2024-05-09T19:09:37","date_gmt":"2024-05-09T19:09:37","guid":{"rendered":"https:\/\/worldseotool.com\/?page_id=921"},"modified":"2024-05-09T19:09:37","modified_gmt":"2024-05-09T19:09:37","slug":"jpg-to-webp-converter-2","status":"publish","type":"page","link":"https:\/\/shoptips24.com\/tools\/jpg-to-webp-converter-2\/","title":{"rendered":"PNG to WebP Converter"},"content":{"rendered":"\n\n<style>\n    body {\n        font-family: Arial, sans-serif;\n        margin: 0;\n        padding: 0;\n    }\n    .container {\n        max-width: 600px;\n        margin: 20px auto;\n        text-align: center;\n    }\n    img {\n        max-width: 100%;\n        margin-top: 20px;\n    }\n    button {\n        margin-top: 10px;\n        padding: 10px 20px;\n        background-color: #007bff;\n        color: #fff;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n    button:active {\n        background-color: #0056b3;\n    }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n    <input type=\"file\" accept=\"image\/png\" id=\"imageInput\" style=\"display: none;\">\n    <button onclick=\"document.getElementById('imageInput').click();\">Choose Image<\/button>\n    <button onclick=\"convertToWebP()\">Convert to WebP<\/button>\n    <div id=\"originalImageContainer\" style=\"display: none;\">\n        <h2>Original Image<\/h2>\n        <img id=\"originalImage\">\n    <\/div>\n    <div id=\"convertedImagesContainer\"><\/div>\n<\/div>\n\n<script>\n    function convertToWebP() {\n        var input = document.getElementById('imageInput');\n        if (input.files && input.files[0]) {\n            var originalImage = document.getElementById('originalImage');\n            originalImage.src = URL.createObjectURL(input.files[0]);\n            originalImage.onload = function() {\n                URL.revokeObjectURL(originalImage.src);\n                document.getElementById('originalImageContainer').style.display = 'block';\n            };\n\n            var convertedImagesContainer = document.getElementById('convertedImagesContainer');\n            convertedImagesContainer.innerHTML = '';\n\n            \/\/ Converting the image to WebP\n            var canvas = document.createElement('canvas');\n            var ctx = canvas.getContext('2d');\n            var img = new Image();\n            img.onload = function() {\n                canvas.width = img.width;\n                canvas.height = img.height;\n                ctx.drawImage(img, 0, 0, img.width, img.height);\n                var convertedImageData = canvas.toDataURL('image\/webp');\n                \n                \/\/ Displaying the converted image\n                var convertedImage = document.createElement('img');\n                convertedImage.src = convertedImageData;\n                var downloadButton = document.createElement('a');\n                downloadButton.href = convertedImageData;\n                downloadButton.download = 'converted_image.webp';\n                downloadButton.innerText = 'Download Converted Image';\n                convertedImagesContainer.appendChild(convertedImage);\n                convertedImagesContainer.appendChild(downloadButton);\n            };\n            img.src = URL.createObjectURL(input.files[0]);\n        }\n    }\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Choose Image Convert to WebP Original Image<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-921","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/pages\/921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/comments?post=921"}],"version-history":[{"count":0,"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/pages\/921\/revisions"}],"wp:attachment":[{"href":"https:\/\/shoptips24.com\/tools\/wp-json\/wp\/v2\/media?parent=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}