Image Resizer<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n }\n\n h1 {\n margin-top: 20px;\n }\n\n input, button {\n margin: 10px;\n padding: 5px;\n }\n\n #resultContainer {\n display: none;\n margin: 20px;\n }\n\n #resizedImage {\n max-width: 100%;\n max-height: 300px;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Image Resizer<\/h1>\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" \/>\n <div>\n <label for=\"width\">Width:<\/label>\n <input type=\"number\" id=\"width\" placeholder=\"Width\" \/>\n <\/div>\n <div>\n <label for \"height\">Height:<\/label>\n <input type=\"number\" id=\"height\" placeholder=\"Height\" \/>\n <\/div>\n <button id=\"resizeButton\">Resize Image<\/button>\n <div id=\"resultContainer\">\n <h2>Resized Image<\/h2>\n <img id=\"resizedImage\" alt=\"Resized Image\" \/>\n <a id=\"downloadLink\" style=\"display: none\">Download Resized Image<\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const imageInput = document.getElementById(\"imageInput\");\n const widthInput = document.getElementById(\"width\");\n const heightInput = document.getElementById(\"height\");\n const resizeButton = document.getElementById(\"resizeButton\");\n const resultContainer = document.getElementById(\"resultContainer\");\n const resizedImage = document.getElementById(\"resizedImage\");\n const downloadLink = document.getElementById(\"downloadLink\");\n\n resizeButton.addEventListener(\"click\", function () {\n const file = imageInput.files[0];\n const width = parseInt(widthInput.value);\n const height = parseInt(heightInput.value);\n\n if (!file || isNaN(width) || isNaN(height)) {\n alert(\"Please select an image and enter valid dimensions.\");\n return;\n }\n\n const reader = new FileReader();\n reader.onload = function (e) {\n const image = new Image();\n image.src = e.target.result;\n\n image.onload = function () {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(image, 0, 0, width, height);\n\n resizedImage.src = canvas.toDataURL(\"image\/jpeg\");\n resultContainer.style.display = \"block\";\n\n \/\/ Automatically trigger the download\n downloadLink.href = resizedImage.src;\n downloadLink.download = \"resized_image.jpg\";\n downloadLink.style.display = \"block\";\n };\n };\n reader.readAsDataURL(file);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Image Resizer Image Resizer Width: Height: Resize Image Resized Image Download Resized Image<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/pages\/5302"}],"collection":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/comments?post=5302"}],"version-history":[{"count":0,"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/pages\/5302\/revisions"}],"wp:attachment":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/media?parent=5302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5302,"date":"2023-11-06T02:33:59","date_gmt":"2023-11-06T02:33:59","guid":{"rendered":"http:\/\/localhost\/gpjob1\/?page_id=5302"},"modified":"2023-11-06T02:37:54","modified_gmt":"2023-11-06T02:37:54","slug":"image-resizer","status":"publish","type":"page","link":"http:\/\/localhost\/gpjob1\/image-resizer\/","title":{"rendered":"Image Resizer"},"content":{"rendered":"\n\n\n\n Image Resizer<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n }\n\n h1 {\n margin-top: 20px;\n }\n\n input, button {\n margin: 10px;\n padding: 5px;\n }\n\n #resultContainer {\n display: none;\n margin: 20px;\n }\n\n #resizedImage {\n max-width: 100%;\n max-height: 300px;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Image Resizer<\/h1>\n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" \/>\n <div>\n <label for=\"width\">Width:<\/label>\n <input type=\"number\" id=\"width\" placeholder=\"Width\" \/>\n <\/div>\n <div>\n <label for \"height\">Height:<\/label>\n <input type=\"number\" id=\"height\" placeholder=\"Height\" \/>\n <\/div>\n <button id=\"resizeButton\">Resize Image<\/button>\n <div id=\"resultContainer\">\n <h2>Resized Image<\/h2>\n <img id=\"resizedImage\" alt=\"Resized Image\" \/>\n <a id=\"downloadLink\" style=\"display: none\">Download Resized Image<\/a>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const imageInput = document.getElementById(\"imageInput\");\n const widthInput = document.getElementById(\"width\");\n const heightInput = document.getElementById(\"height\");\n const resizeButton = document.getElementById(\"resizeButton\");\n const resultContainer = document.getElementById(\"resultContainer\");\n const resizedImage = document.getElementById(\"resizedImage\");\n const downloadLink = document.getElementById(\"downloadLink\");\n\n resizeButton.addEventListener(\"click\", function () {\n const file = imageInput.files[0];\n const width = parseInt(widthInput.value);\n const height = parseInt(heightInput.value);\n\n if (!file || isNaN(width) || isNaN(height)) {\n alert(\"Please select an image and enter valid dimensions.\");\n return;\n }\n\n const reader = new FileReader();\n reader.onload = function (e) {\n const image = new Image();\n image.src = e.target.result;\n\n image.onload = function () {\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(image, 0, 0, width, height);\n\n resizedImage.src = canvas.toDataURL(\"image\/jpeg\");\n resultContainer.style.display = \"block\";\n\n \/\/ Automatically trigger the download\n downloadLink.href = resizedImage.src;\n downloadLink.download = \"resized_image.jpg\";\n downloadLink.style.display = \"block\";\n };\n };\n reader.readAsDataURL(file);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Image Resizer Image Resizer Width: Height: Resize Image Resized Image Download Resized Image<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/pages\/5302"}],"collection":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/comments?post=5302"}],"version-history":[{"count":0,"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/pages\/5302\/revisions"}],"wp:attachment":[{"href":"http:\/\/localhost\/gpjob1\/wp-json\/wp\/v2\/media?parent=5302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}