{"id":7,"date":"2026-06-11T06:27:48","date_gmt":"2026-06-11T06:27:48","guid":{"rendered":"https:\/\/adona.qua2.com\/?page_id=7"},"modified":"2026-06-11T06:42:55","modified_gmt":"2026-06-11T06:42:55","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/adona.qua2.com\/index.php\/elementor-7\/","title":{"rendered":"Elementor #7"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8ca3fa0 e-flex e-con-boxed e-con e-parent\" data-id=\"8ca3fa0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-47b832e elementor-widget elementor-widget-html\" data-id=\"47b832e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div style=\"max-width:700px;margin:30px auto;font-family:Arial;border:1px solid #ddd;border-radius:12px;padding:20px;background:#fafafa\">\r\n\r\n  <h2 style=\"text-align:center;margin-bottom:10px\">Image to WebP Converter<\/h2>\r\n  <p style=\"text-align:center;color:#666\">Convert JPG \/ PNG to WebP instantly (100% browser-based)<\/p>\r\n\r\n  <!-- DROP AREA -->\r\n  <div id=\"dropArea\"\r\n       style=\"border:2px dashed #999;padding:30px;text-align:center;border-radius:10px;background:#fff;cursor:pointer\">\r\n\r\n    <p><b>Drag & Drop Image Here<\/b><\/p>\r\n    <p>or click to select<\/p>\r\n    <input type=\"file\" id=\"fileInput\" accept=\"image\/*\" style=\"display:none\">\r\n  <\/div>\r\n\r\n  <br>\r\n\r\n  <!-- PREVIEW -->\r\n  <div style=\"text-align:center\">\r\n    <img id=\"preview\" style=\"max-width:100%;display:none;border-radius:10px;margin-top:10px\">\r\n  <\/div>\r\n\r\n  <br>\r\n\r\n  <!-- QUALITY -->\r\n  <div style=\"text-align:center\">\r\n    <label>Quality: <span id=\"qValue\">0.9<\/span><\/label><br>\r\n    <input type=\"range\" id=\"quality\" min=\"0.1\" max=\"1\" step=\"0.1\" value=\"0.9\">\r\n  <\/div>\r\n\r\n  <br>\r\n\r\n  <!-- BUTTON -->\r\n  <div style=\"text-align:center\">\r\n    <button id=\"convertBtn\"\r\n            style=\"padding:10px 20px;background:#0073aa;color:white;border:none;border-radius:6px;cursor:pointer\">\r\n      Convert to WebP\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <br>\r\n\r\n  <!-- DOWNLOAD -->\r\n  <div style=\"text-align:center\">\r\n    <a id=\"downloadBtn\"\r\n       style=\"display:none;padding:10px 20px;background:#28a745;color:white;text-decoration:none;border-radius:6px\">\r\n      Download WebP\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <canvas id=\"canvas\" style=\"display:none\"><\/canvas>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst dropArea = document.getElementById(\"dropArea\");\r\nconst fileInput = document.getElementById(\"fileInput\");\r\nconst preview = document.getElementById(\"preview\");\r\nconst quality = document.getElementById(\"quality\");\r\nconst qValue = document.getElementById(\"qValue\");\r\nconst convertBtn = document.getElementById(\"convertBtn\");\r\nconst downloadBtn = document.getElementById(\"downloadBtn\");\r\n\r\nlet imageFile = null;\r\n\r\n\/\/ Update quality label\r\nquality.addEventListener(\"input\", () => {\r\n  qValue.innerText = quality.value;\r\n});\r\n\r\n\/\/ Click to upload\r\ndropArea.addEventListener(\"click\", () => fileInput.click());\r\n\r\n\/\/ File select\r\nfileInput.addEventListener(\"change\", (e) => {\r\n  handleFile(e.target.files[0]);\r\n});\r\n\r\n\/\/ Drag & drop\r\ndropArea.addEventListener(\"dragover\", (e) => {\r\n  e.preventDefault();\r\n  dropArea.style.borderColor = \"#0073aa\";\r\n});\r\n\r\ndropArea.addEventListener(\"dragleave\", () => {\r\n  dropArea.style.borderColor = \"#999\";\r\n});\r\n\r\ndropArea.addEventListener(\"drop\", (e) => {\r\n  e.preventDefault();\r\n  dropArea.style.borderColor = \"#999\";\r\n  handleFile(e.dataTransfer.files[0]);\r\n});\r\n\r\nfunction handleFile(file) {\r\n  if (!file) return;\r\n\r\n  imageFile = file;\r\n\r\n  const reader = new FileReader();\r\n  reader.onload = function(e) {\r\n    preview.src = e.target.result;\r\n    preview.style.display = \"block\";\r\n  };\r\n  reader.readAsDataURL(file);\r\n}\r\n\r\n\/\/ Convert\r\nconvertBtn.addEventListener(\"click\", () => {\r\n  if (!imageFile) {\r\n    alert(\"Please upload an image first\");\r\n    return;\r\n  }\r\n\r\n  const reader = new FileReader();\r\n\r\n  reader.onload = function(e) {\r\n    const img = new Image();\r\n\r\n    img.onload = function() {\r\n      const canvas = document.getElementById(\"canvas\");\r\n      const ctx = canvas.getContext(\"2d\");\r\n\r\n      canvas.width = img.width;\r\n      canvas.height = img.height;\r\n\r\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n      ctx.drawImage(img, 0, 0);\r\n\r\n      const q = parseFloat(quality.value);\r\n\r\n      canvas.toBlob(function(blob) {\r\n        const url = URL.createObjectURL(blob);\r\n\r\n        downloadBtn.href = url;\r\n        downloadBtn.download = \"converted.webp\";\r\n        downloadBtn.style.display = \"inline-block\";\r\n        downloadBtn.innerText = \"Download WebP\";\r\n\r\n      }, \"image\/webp\", q);\r\n    };\r\n\r\n    img.src = e.target.result;\r\n  };\r\n\r\n  reader.readAsDataURL(imageFile);\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Image to WebP Converter Convert JPG \/ PNG to WebP instantly (100% browser-based) Drag &#038; Drop Image Here or click to select Quality: 0.9 Convert to WebP Download WebP<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":10,"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/adona.qua2.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}