Image Resizer<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f2f2f2;\n margin: 0;\n \n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n .container {\n max-width: 400px;\n padding: 20px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n h1 {\n text-align: center;\n color: #333;\n }\n .input-group {\n margin-bottom: 20px;\n }\n .input-group label {\n display: block;\n margin-bottom: 5px;\n color: #666;\n }\n .input-group input[type=\"number\"] {\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #ccc;\n }\n .btn {\n display: block;\n width: 100%;\n padding: 10px;\n border: none;\n border-radius: 4px;\n background-color: #4caf50;\n color: #fff;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .btn:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Image Resizer<\/h1>\n <div class=\"input-group\">\n <label for=\"uploadImage\">Choose an image:<\/label>\n <input type=\"file\" id=\"uploadImage\">\n <\/div>\n <div class=\"input-group\">\n <label for=\"imageWidth\">Width (px):<\/label>\n <input type=\"number\" id=\"imageWidth\" placeholder=\"Enter width\">\n <\/div>\n <div class=\"input-group\">\n <label for=\"imageHeight\">Height (px):<\/label>\n <input type=\"number\" id=\"imageHeight\" placeholder=\"Enter height\">\n <\/div>\n <button class=\"btn\" onclick=\"resizeImage()\">Resize & Download<\/button>\n <\/div>\n\n <script>\n function resizeImage() {\n const input = document.getElementById('uploadImage');\n const width = document.getElementById('imageWidth').value;\n const height = document.getElementById('imageHeight').value;\n\n if (input.files && input.files[0]) {\n const reader = new FileReader();\n\n reader.onload = function(e) {\n const img = new Image();\n img.src = e.target.result;\n\n img.onload = function() {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n\n canvas.width = width || img.width;\n canvas.height = height || img.height;\n\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\n const downloadLink = document.createElement('a');\n downloadLink.href = canvas.toDataURL('image\/jpeg');\n downloadLink.download = 'resized_image.jpg';\n downloadLink.click();\n };\n };\n\n reader.readAsDataURL(input.files[0]);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n<p>This Image Resizer tool is a web-based application designed to allow users to upload an image, specify custom width and height dimensions, and download the resized image. It provides a simple and user-friendly interface with input fields for image upload and dimension adjustment, along with a button to trigger the resizing process. The tool utilizes HTML, CSS, and JavaScript to handle image manipulation by using the HTML5 Canvas element to resize the uploaded image according to the specified dimensions. Upon resizing, the tool generates a downloadable link for the resized image in JPEG format, enabling users to easily obtain their modified image for further use.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Image Resizer Image Resizer Choose an image: Width (px): Height (px): Resize & Download This Image Resizer tool is a web-based application designed to allow users to upload an image, specify custom width and height dimensions, and download the resized image. It provides a simple and user-friendly interface with input fields for image upload and […]<\/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-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":1,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/55\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":55,"date":"2024-03-25T10:37:32","date_gmt":"2024-03-25T10:37:32","guid":{"rendered":"https:\/\/calcuconvertonline.com\/?page_id=55"},"modified":"2024-03-26T12:27:41","modified_gmt":"2024-03-26T12:27:41","slug":"image-resizer-tool","status":"publish","type":"page","link":"https:\/\/calcuconvertonline.com\/index.php\/image-resizer-tool\/","title":{"rendered":"Image Resizer Tool"},"content":{"rendered":"\n\n\n\n \n Image Resizer<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n background-color: #f2f2f2;\n margin: 0;\n \n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n .container {\n max-width: 400px;\n padding: 20px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n h1 {\n text-align: center;\n color: #333;\n }\n .input-group {\n margin-bottom: 20px;\n }\n .input-group label {\n display: block;\n margin-bottom: 5px;\n color: #666;\n }\n .input-group input[type=\"number\"] {\n width: 100%;\n padding: 8px;\n border-radius: 4px;\n border: 1px solid #ccc;\n }\n .btn {\n display: block;\n width: 100%;\n padding: 10px;\n border: none;\n border-radius: 4px;\n background-color: #4caf50;\n color: #fff;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.3s;\n }\n .btn:hover {\n background-color: #45a049;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Image Resizer<\/h1>\n <div class=\"input-group\">\n <label for=\"uploadImage\">Choose an image:<\/label>\n <input type=\"file\" id=\"uploadImage\">\n <\/div>\n <div class=\"input-group\">\n <label for=\"imageWidth\">Width (px):<\/label>\n <input type=\"number\" id=\"imageWidth\" placeholder=\"Enter width\">\n <\/div>\n <div class=\"input-group\">\n <label for=\"imageHeight\">Height (px):<\/label>\n <input type=\"number\" id=\"imageHeight\" placeholder=\"Enter height\">\n <\/div>\n <button class=\"btn\" onclick=\"resizeImage()\">Resize & Download<\/button>\n <\/div>\n\n <script>\n function resizeImage() {\n const input = document.getElementById('uploadImage');\n const width = document.getElementById('imageWidth').value;\n const height = document.getElementById('imageHeight').value;\n\n if (input.files && input.files[0]) {\n const reader = new FileReader();\n\n reader.onload = function(e) {\n const img = new Image();\n img.src = e.target.result;\n\n img.onload = function() {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n\n canvas.width = width || img.width;\n canvas.height = height || img.height;\n\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n\n const downloadLink = document.createElement('a');\n downloadLink.href = canvas.toDataURL('image\/jpeg');\n downloadLink.download = 'resized_image.jpg';\n downloadLink.click();\n };\n };\n\n reader.readAsDataURL(input.files[0]);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n<p>This Image Resizer tool is a web-based application designed to allow users to upload an image, specify custom width and height dimensions, and download the resized image. It provides a simple and user-friendly interface with input fields for image upload and dimension adjustment, along with a button to trigger the resizing process. The tool utilizes HTML, CSS, and JavaScript to handle image manipulation by using the HTML5 Canvas element to resize the uploaded image according to the specified dimensions. Upon resizing, the tool generates a downloadable link for the resized image in JPEG format, enabling users to easily obtain their modified image for further use.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Image Resizer Image Resizer Choose an image: Width (px): Height (px): Resize & Download This Image Resizer tool is a web-based application designed to allow users to upload an image, specify custom width and height dimensions, and download the resized image. It provides a simple and user-friendly interface with input fields for image upload and […]<\/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-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":1,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/55\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}