{"id":344,"date":"2026-07-11T18:23:21","date_gmt":"2026-07-11T18:23:21","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=344"},"modified":"2026-07-15T12:33:29","modified_gmt":"2026-07-15T12:33:29","slug":"image-compressor-2","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/image-compressor-2\/","title":{"rendered":"Image Resizer"},"content":{"rendered":"\n<div id=\"resizer-app\" style=\"max-width: 800px; margin: auto; padding: 20px; font-family: sans-serif; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);\">\n    <h2 style=\"text-align: center; color: #333;\">Pro Image Resizer<\/h2>\n    \n    <div style=\"text-align: center; margin-bottom: 20px;\">\n        <input type=\"file\" id=\"file-upload\" accept=\"image\/*\" style=\"display:none\">\n        <button onclick=\"document.getElementById('file-upload').click()\" style=\"background: #6366f1; color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer;\">Select Image<\/button>\n    <\/div>\n\n    <div style=\"margin-bottom: 20px;\">\n        <label>Aspect Ratio \/ Size Presets:<\/label>\n        <select id=\"ratio-select\" style=\"width: 100%; padding: 10px; border-radius: 8px; margin-top: 5px;\">\n            <option value=\"custom\">Custom Size<\/option>\n            <option value=\"1:1\">Square (1:1)<\/option>\n            <option value=\"16:9\">YouTube (16:9)<\/option>\n            <option value=\"35:35\">Passport 35mm x 35mm<\/option>\n            <option value=\"600:600\">Passport 2in x 2in (600px)<\/option>\n        <\/select>\n    <\/div>\n\n    <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;\">\n        <div>\n            <label>Width (px)<\/label>\n            <input type=\"number\" id=\"width-val\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;\">\n        <\/div>\n        <div>\n            <label>Height (px)<\/label>\n            <input type=\"number\" id=\"height-val\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;\">\n        <\/div>\n    <\/div>\n\n    <button id=\"download-btn\" style=\"width: 100%; background: #22c55e; color: white; border: none; padding: 15px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold;\">Resize &#038; Download<\/button>\n\n    <div style=\"margin-top: 20px; text-align: center;\">\n        <canvas id=\"main-canvas\" style=\"max-width: 100%; border: 1px solid #eee;\"><\/canvas>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const fileInput = document.getElementById('file-upload');\n    const canvas = document.getElementById('main-canvas');\n    const ctx = canvas.getContext('2d');\n    const widthInput = document.getElementById('width-val');\n    const heightInput = document.getElementById('height-val');\n    const ratioSelect = document.getElementById('ratio-select');\n    let img = new Image();\n\n    fileInput.addEventListener('change', (e) => {\n        const reader = new FileReader();\n        reader.onload = (event) => {\n            img.onload = () => {\n                canvas.width = img.width;\n                canvas.height = img.height;\n                ctx.drawImage(img, 0, 0);\n                widthInput.value = img.width;\n                heightInput.value = img.height;\n            };\n            img.src = event.target.result;\n        };\n        reader.readAsDataURL(e.target.files[0]);\n    });\n\n    ratioSelect.addEventListener('change', () => {\n        if (!img.src || ratioSelect.value === 'custom') return;\n        \n        \/\/ Handle Passport\/Fixed Presets\n        if (ratioSelect.value === '35:35') {\n            widthInput.value = 413; \/\/ 35mm at 300dpi\n            heightInput.value = 413;\n        } else if (ratioSelect.value === '600:600') {\n            widthInput.value = 600; \/\/ 2 inches at 300dpi\n            heightInput.value = 600;\n        } else {\n            \/\/ Handle standard aspect ratios\n            const [rw, rh] = ratioSelect.value.split(':').map(Number);\n            heightInput.value = Math.round((widthInput.value \/ rw) * rh);\n        }\n    });\n\n    document.getElementById('download-btn').addEventListener('click', () => {\n        if (!img.src) return alert('Please upload an image first!');\n        const exportCanvas = document.createElement('canvas');\n        exportCanvas.width = parseInt(widthInput.value);\n        exportCanvas.height = parseInt(heightInput.value);\n        exportCanvas.getContext('2d').drawImage(img, 0, 0, exportCanvas.width, exportCanvas.height);\n        exportCanvas.toBlob((blob) => {\n            const a = document.createElement('a');\n            a.href = URL.createObjectURL(blob);\n            a.download = 'resized-image.png';\n            a.click();\n        }, 'image\/png');\n    });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Pro Image Resizer Select Image Aspect Ratio \/ Size Presets: Custom SizeSquare (1:1)YouTube (16:9)Passport 35mm x 35mmPassport 2in x 2in (600px) Width (px) Height (px) Resize &#038; Download<\/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-344","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=344"}],"version-history":[{"count":6,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/344\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/344\/revisions\/350"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}