{"id":129,"date":"2024-07-05T08:37:04","date_gmt":"2024-07-05T07:37:04","guid":{"rendered":"https:\/\/hellopromptly.com\/?page_id=129"},"modified":"2025-03-13T04:36:40","modified_gmt":"2025-03-13T04:36:40","slug":"image-resizer","status":"publish","type":"page","link":"https:\/\/hellopromptly.com\/index.php\/free-tools\/image-resizer\/","title":{"rendered":"Image Resizer"},"content":{"rendered":"\n<p>The Image Resizer allows you to quickly resize images to your desired dimensions. Simply upload an image, set the new size, and download the resized image.<\/p>\n\n\n\n<div id=\"image-resizer\">\n    <style>\n        \/* Reset all styles for this container *\/\n        #image-resizer {\n            all: unset;\n            display: block;\n        }\n\n        \/* Reapply custom styles *\/\n        #image-resizer * {\n            all: revert;\n        }\n\n        #image-resizer body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            height: 100vh;\n            background-color: #f0f0f0;\n            margin: 0;\n            flex-direction: column;\n        }\n\n        #image-resizer .container {\n            background-color: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n            text-align: center;\n            width: 100%;\n            max-width: 600px;\n        }\n\n        #image-resizer .input-group {\n            margin: 10px 0;\n        }\n\n        #image-resizer #canvas {\n            display: none;\n            margin-top: 20px;\n            border: 1px solid #ccc;\n        }\n\n        #image-resizer #dropArea {\n            border: 2px dashed #ccc;\n            border-radius: 8px;\n            padding: 20px;\n            cursor: pointer;\n            margin-bottom: 20px;\n        }\n\n        #image-resizer #dropArea.dragover {\n            background-color: #f0f0f0;\n        }\n    <\/style>\n\n    <div class=\"container\">\n        <p><u><strong>Note:<\/strong><\/u> Images are processed locally in your browser. <br>And are never uploaded or saved.<br><br>Changing the dimensions of the image does not alter the pixel count; it resizes the image without upscaling or compressing it.<br> <\/p>\n        <p><strong>Drag and drop your image here or click to upload.<\/strong><\/p>\n        <div id=\"dropArea\">\n            <input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n            <p id=\"dropAreaText\">No file selected<\/p>\n        <\/div>\n        <button id=\"cancelBtn\" style=\"display:none;\">Cancel<\/button>\n        <div class=\"input-group\">\n            <label for=\"width\">Width (px):<\/label>\n            <input type=\"number\" id=\"width\" min=\"1\">\n        <\/div>\n        <div class=\"input-group\">\n            <label for=\"height\">Height (px):<\/label>\n            <input type=\"number\" id=\"height\" min=\"1\">\n        <\/div>\n        <div class=\"input-group\">\n            <label for=\"aspectRatio\">Aspect Ratio:<\/label>\n            <input type=\"text\" id=\"aspectRatio\" readonly>\n        <\/div>\n        <div class=\"input-group\">\n            <input type=\"checkbox\" id=\"maintainAspectRatio\">\n            <label for=\"maintainAspectRatio\">Maintain Aspect Ratio<\/label>\n        <\/div>\n        <button id=\"resizeBtn\">Resize Image<\/button>\n        <canvas id=\"canvas\"><\/canvas>\n        <a id=\"downloadLink\" style=\"display:none;\">Download Resized Image<\/a>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', () => {\n            const imageInput = document.getElementById('imageInput');\n            const dropArea = document.getElementById('dropArea');\n            const dropAreaText = document.getElementById('dropAreaText');\n            const cancelBtn = document.getElementById('cancelBtn');\n            const widthInput = document.getElementById('width');\n            const heightInput = document.getElementById('height');\n            const aspectRatioInput = document.getElementById('aspectRatio');\n            const maintainAspectRatioCheckbox = document.getElementById('maintainAspectRatio');\n            const resizeBtn = document.getElementById('resizeBtn');\n            const canvas = document.getElementById('canvas');\n            const downloadLink = document.getElementById('downloadLink');\n            let originalImage = null;\n            let originalAspectRatio = null;\n\n            imageInput.addEventListener('change', handleImageUpload);\n            dropArea.addEventListener('dragover', handleDragOver);\n            dropArea.addEventListener('drop', handleDrop);\n            cancelBtn.addEventListener('click', cancelImage);\n            resizeBtn.addEventListener('click', resizeImage);\n            widthInput.addEventListener('input', adjustHeight);\n            heightInput.addEventListener('input', adjustWidth);\n\n            function handleImageUpload(event) {\n                const file = event.target.files[0];\n                processFile(file);\n                dropAreaText.textContent = file ? `File selected: ${file.name}` : 'No file selected';\n            }\n\n            function handleDragOver(event) {\n                event.preventDefault();\n                dropArea.classList.add('dragover');\n            }\n\n            function handleDrop(event) {\n                event.preventDefault();\n                dropArea.classList.remove('dragover');\n                const file = event.dataTransfer.files[0];\n                processFile(file);\n                dropAreaText.textContent = file ? `File selected: ${file.name}` : 'No file selected';\n            }\n\n            function processFile(file) {\n                if (file) {\n                    const reader = new FileReader();\n                    reader.onload = function (e) {\n                        const img = new Image();\n                        img.onload = function () {\n                            originalImage = img;\n                            widthInput.value = img.width;\n                            heightInput.value = img.height;\n                            originalAspectRatio = img.width \/ img.height;\n                            aspectRatioInput.value = formatAspectRatio(originalAspectRatio);\n                            cancelBtn.style.display = 'inline-block';\n                        };\n                        img.src = e.target.result;\n                    };\n                    reader.readAsDataURL(file);\n                }\n            }\n\n            function cancelImage() {\n                originalImage = null;\n                widthInput.value = '';\n                heightInput.value = '';\n                aspectRatioInput.value = '';\n                canvas.style.display = 'none';\n                downloadLink.style.display = 'none';\n                cancelBtn.style.display = 'none';\n                imageInput.value = '';\n                dropAreaText.textContent = 'No file selected';\n            }\n\n            function resizeImage() {\n                if (originalImage) {\n                    const width = parseInt(widthInput.value);\n                    const height = parseInt(heightInput.value);\n                    canvas.width = width;\n                    canvas.height = height;\n                    const ctx = canvas.getContext('2d');\n                    ctx.drawImage(originalImage, 0, 0, width, height);\n                    canvas.style.display = 'block';\n                    downloadLink.href = canvas.toDataURL('image\/png');\n                    downloadLink.download = 'resized-image.png';\n                    downloadLink.style.display = 'inline-block';\n                    downloadLink.textContent = 'Download Resized Image';\n                }\n            }\n\n            function adjustHeight() {\n                if (maintainAspectRatioCheckbox.checked && originalImage) {\n                    const width = parseInt(widthInput.value);\n                    const height = Math.round(width \/ originalAspectRatio);\n                    heightInput.value = height;\n                    aspectRatioInput.value = formatAspectRatio(width \/ height);\n                }\n            }\n\n            function adjustWidth() {\n                if (maintainAspectRatioCheckbox.checked && originalImage) {\n                    const height = parseInt(heightInput.value);\n                    const width = Math.round(height * originalAspectRatio);\n                    widthInput.value = width;\n                    aspectRatioInput.value = formatAspectRatio(width \/ height);\n                }\n            }\n\n            function formatAspectRatio(ratio) {\n                const gcd = (a, b) => (b ? gcd(b, a % b) : a);\n                const width = Math.round(ratio * 100);\n                const height = 100;\n                const divisor = gcd(width, height);\n                return `${width \/ divisor}:${height \/ divisor}`;\n            }\n        });\n    <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Image Resizer allows you to quickly resize images to your desired dimensions. Simply upload an image, set the new size, and download the resized image. Note: Images are processed locally in your browser. And are never uploaded or saved. Changing the dimensions of the image does not alter the pixel count; it resizes the &#8230; <a title=\"Image Resizer\" class=\"read-more\" href=\"https:\/\/hellopromptly.com\/index.php\/free-tools\/image-resizer\/\" aria-label=\"Read more about Image Resizer\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":81,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-129","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":3,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/129\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/129\/revisions\/156"}],"up":[{"embeddable":true,"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/pages\/81"}],"wp:attachment":[{"href":"https:\/\/hellopromptly.com\/index.php\/wp-json\/wp\/v2\/media?parent=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}