{"id":49,"date":"2026-09-10T05:23:20","date_gmt":"2026-09-10T05:23:20","guid":{"rendered":"https:\/\/ankmavenmarketing.in\/tools\/?page_id=49"},"modified":"2026-09-10T05:26:38","modified_gmt":"2026-09-10T05:26:38","slug":"online-image-resizer","status":"publish","type":"page","link":"https:\/\/ankmavenmarketing.in\/tools\/online-image-resizer\/","title":{"rendered":"Online Image Resizer"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"49\" class=\"elementor elementor-49\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f01e923 e-flex e-con-boxed e-con e-parent\" data-id=\"f01e923\" 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-63fad4a elementor-widget elementor-widget-shortcode\" data-id=\"63fad4a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <!-- JSZip Library for Bulk ZIP Download -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\r\n    \r\n    <!-- Ank Maven Marketing Bulk Image Resizer UI (Brand Themed) -->\r\n    <div id=\"ank-ultimate-resizer\">\r\n        <style>\r\n            #ank-ultimate-resizer {\r\n                --ank-dark: #070d19; --ank-navy: #0f172a; --ank-cyan: #22d3ee; --ank-orange: #f97316; \r\n                --ank-border: #1e293b; --ank-card-bg: #0b1329; --ank-text: #f8fafc; --ank-muted: #94a3b8;\r\n                font-family: 'Inter', sans-serif; background: var(--ank-dark); max-width: 1100px; margin: 5px auto;\r\n                border: 1px solid var(--ank-border); color: var(--ank-text); box-sizing: border-box; position: relative;\r\n            }\r\n            #ank-ultimate-resizer * { box-sizing: border-box; }\r\n\r\n            .ank-head { background: var(--ank-navy); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ank-border); }\r\n            .ank-head h4 { color: #fff; margin: 0; font-size: 11px; letter-spacing: 2px; font-weight: 900; text-transform: uppercase; }\r\n            .ank-head h4 span { color: var(--ank-orange); }\r\n\r\n            \/* Features Bar *\/\r\n            .ank-guide-box { background: var(--ank-card-bg); border-bottom: 1px solid var(--ank-border); padding: 6px 10px; font-size: 9px; color: var(--ank-muted); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; }\r\n            .ank-guide-box span { font-weight: 800; color: var(--ank-cyan); }\r\n            .ank-guide-tags { display: flex; gap: 6px; flex-wrap: wrap; }\r\n            .ank-guide-tag { background: var(--ank-navy); border: 1px solid var(--ank-border); padding: 2px 6px; border-radius: 3px; font-size: 8px; font-weight: 700; color: var(--ank-cyan); }\r\n\r\n            \/* Options Rows *\/\r\n            .ank-opt-row { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ank-border); background: var(--ank-dark); }\r\n            .ank-opt-row.row-2 { background: var(--ank-card-bg); }\r\n            \r\n            .ank-group { display: flex; flex-direction: column; padding: 8px 10px; border-right: 1px solid var(--ank-border); border-bottom: 1px solid var(--ank-border); height: 75px; justify-content: flex-start; }\r\n            .ank-group:nth-child(4n) { border-right: none; }\r\n            \r\n            .ank-label { font-size: 8px; font-weight: 900; color: var(--ank-orange); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; display: flex; justify-content: space-between; }\r\n\r\n            .ank-ctrl-wrap { border: 1px solid var(--ank-border); height: 35px; width: 100%; border-radius: 4px; display: flex; align-items: center; background: var(--ank-navy); overflow: hidden; padding: 0 6px; }\r\n            .ank-ctrl-box { border: none; height: 100%; width: 100%; font-size: 10px; font-weight: 700; outline: none; background: transparent; color: var(--ank-text); }\r\n            select.ank-ctrl-box { cursor: pointer; -webkit-appearance: none; background-image: url('data:image\/svg+xml;charset=US-ASCII,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%2322d3ee\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>'); background-repeat: no-repeat; background-position: right 8px center; }\r\n            select.ank-ctrl-box option { background: var(--ank-navy); color: var(--ank-text); }\r\n\r\n            .ank-toggle-wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; font-size: 9px; font-weight: 800; cursor: pointer; width: 100%; padding: 0 4px; color: var(--ank-text); }\r\n            .ank-toggle-wrap input { cursor: pointer; width: 14px; height: 14px; accent-color: var(--ank-cyan); }\r\n\r\n            \/* Viewer Viewport *\/\r\n            .ank-view { display: grid; grid-template-columns: 1fr 1fr; height: 260px; background: var(--ank-border); gap: 1px; }\r\n            .pnl { background: #040810; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: radial-gradient(#1e293b 0.8px, transparent 0.8px); background-size: 12px 12px; }\r\n            .pnl::after { content: attr(data-label); position: absolute; top: 8px; left: 8px; background: var(--ank-cyan); color: var(--ank-dark); font-size: 7px; padding: 3px 8px; font-weight: 900; z-index: 10; border-radius: 2px; }\r\n            .ank-view img { max-width: 90%; max-height: 90%; object-fit: contain; z-index: 5; }\r\n\r\n            .size-badge { position: absolute; bottom: 8px; right: 8px; background: var(--ank-navy); color: var(--ank-cyan); font-size: 9px; padding: 3px 7px; font-weight: bold; z-index: 10; border-radius: 3px; border: 1px solid var(--ank-border); }\r\n            .meta-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(7, 13, 25, 0.9); color: var(--ank-orange); font-size: 7px; padding: 3px 6px; font-weight: bold; z-index: 10; border-radius: 3px; }\r\n\r\n            \/* Thumbnails *\/\r\n            .ank-thumbs { display: none; gap: 8px; padding: 8px 10px; background: var(--ank-card-bg); border-top: 1px solid var(--ank-border); overflow-x: auto; max-height: 95px; }\r\n            .t-card { display: flex; flex-direction: column; gap: 3px; min-width: 55px; align-items: center; }\r\n            .t-box { width: 50px; height: 50px; border: 2px solid var(--ank-border); cursor: pointer; border-radius: 4px; overflow: hidden; background: var(--ank-navy); position: relative; }\r\n            .t-box.active { border-color: var(--ank-cyan); background: #0f2238; }\r\n            .t-box img { width: 100%; height: 100%; object-fit: cover; }\r\n            .btn-save { background: var(--ank-cyan); color: var(--ank-dark); border: none; font-size: 7px; font-weight: 900; padding: 2px 0; cursor: pointer; border-radius: 3px; width: 100%; text-transform: uppercase; }\r\n\r\n            \/* Footer *\/\r\n            .ank-foot { padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; background: var(--ank-navy); border-top: 1px solid var(--ank-border); }\r\n            .btn-main { background: var(--ank-orange); color: white; border: none; padding: 0 18px; height: 35px; font-size: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; border-radius: 4px; transition: 0.2s; }\r\n            .btn-main:hover { opacity: 0.9; }\r\n            .btn-zip { background: var(--ank-cyan) !important; color: var(--ank-dark) !important; display: none; }\r\n            .btn-reset { background: var(--ank-card-bg); color: var(--ank-text); border: 1px solid var(--ank-border); }\r\n\r\n            @media (max-width: 768px) {\r\n                .ank-opt-row { grid-template-columns: 1fr 1fr; }\r\n                .ank-view { grid-template-columns: 1fr; height: 420px; }\r\n            }\r\n        <\/style>\r\n\r\n        <div class=\"ank-head\">\r\n            <h4>ANK MAVEN <span>MARKETING<\/span> \u2014 BULK IMAGE RESIZER v2.5<\/h4>\r\n            <div id=\"sys-tag\" style=\"color:var(--ank-cyan); font-size:9px; font-weight:900;\">\u25cf READY<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ank-guide-box\">\r\n            <span>\u26a1 Smart-Lock Automated Suite:<\/span>\r\n            <div class=\"ank-guide-tags\">\r\n                <div class=\"ank-guide-tag\">Auto-Populated Dimensions<\/div>\r\n                <div class=\"ank-guide-tag\">Strict Size-Guard Protection<\/div>\r\n                <div class=\"ank-guide-tag\">Platform & Custom Presets<\/div>\r\n                <div class=\"ank-guide-tag\">Batch ZIP Export<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ROW 1: PLATFORM PRESETS & VALUES -->\r\n        <div class=\"ank-opt-row\">\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">1. Size Preset \/ Mode<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <select id=\"ank-preset-mode\" class=\"ank-ctrl-box\" onchange=\"applyPreset(this.value)\">\r\n                        <option value=\"custom\">Free Custom \/ Original Size<\/option>\r\n                        <option value=\"percentage\">Percentage Scale (%)<\/option>\r\n                        <optgroup label=\"--- Social & Marketing ---\">\r\n                            <option value=\"1080x1080\">Square Post (1:1)<\/option>\r\n                            <option value=\"1080x1350\">Portrait Post (4:5)<\/option>\r\n                            <option value=\"1080x1920\">Reels \/ Story \/ TikTok (9:16)<\/option>\r\n                            <option value=\"1200x628\">Shared Link \/ Banner (1.91:1)<\/option>\r\n                            <option value=\"1280x720\">YouTube \/ Landscape (16:9)<\/option>\r\n                            <option value=\"1500x500\">Twitter Header (2:1)<\/option>\r\n                        <\/optgroup>\r\n                        <optgroup label=\"--- Cinematic & Wallpapers ---\">\r\n                            <option value=\"2560x1080\">Ultrawide Cinematic (21:9)<\/option>\r\n                            <option value=\"2048x858\">Anamorphic Movie (2.39:1)<\/option>\r\n                            <option value=\"1080x2340\">Mobile Wallpaper (9:19.5)<\/option>\r\n                            <option value=\"1080x2160\">Standard Mobile Wallpaper (9:18)<\/option>\r\n                        <\/optgroup>\r\n                        <optgroup label=\"--- Professional & Print ---\">\r\n                            <option value=\"1200x900\">Standard Photo \/ Catalog (4:3)<\/option>\r\n                            <option value=\"1200x800\">DSLR \/ Web Banner (3:2)<\/option>\r\n                            <option value=\"1240x1754\">A4 \/ Document Ratio (1:1.414)<\/option>\r\n                            <option value=\"1618x1000\">Golden Ratio (1.618:1)<\/option>\r\n                        <\/optgroup>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">2. Width Value<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <input type=\"number\" id=\"ank-val-w\" class=\"ank-ctrl-box\" placeholder=\"Width (px)\" value=\"\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">3. Height Value<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <input type=\"number\" id=\"ank-val-h\" class=\"ank-ctrl-box\" placeholder=\"Height (px)\" value=\"\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">4. Aspect Ratio Lock<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <label class=\"ank-toggle-wrap\">\r\n                        <span>Lock Proportions<\/span>\r\n                        <input type=\"checkbox\" id=\"ank-lock-ratio\">\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ROW 2: FORMAT & STATUS -->\r\n        <div class=\"ank-opt-row row-2\">\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">5. Output Format<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <select id=\"ank-res-format\" class=\"ank-ctrl-box\">\r\n                        <option value=\"jpeg\">JPG Image<\/option>\r\n                        <option value=\"png\">PNG Format<\/option>\r\n                        <option value=\"webp\">WebP Format<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">6. Export Quality<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <select id=\"ank-res-quality\" class=\"ank-ctrl-box\">\r\n                        <option value=\"0.9\" selected>Optimized HD (90%)<\/option>\r\n                        <option value=\"0.75\">Standard (75%)<\/option>\r\n                        <option value=\"0.6\">Compressed (60%)<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\" style=\"grid-column: span 2;\">\r\n                <span class=\"ank-label\">7. System Status<\/span>\r\n                <div class=\"ank-ctrl-wrap\"><div id=\"info-box\" class=\"ank-ctrl-box\" style=\"background:var(--ank-card-bg); color:var(--ank-muted); font-size:9px;\">UPLOAD IMAGES TO START<\/div><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- VIEWER -->\r\n        <div class=\"ank-view\">\r\n            <div class=\"pnl\" data-label=\"ORIGINAL\"><img id=\"v-orig\" style=\"display:none\"><div id=\"s-orig\" class=\"size-badge\" style=\"display:none\">0 KB<\/div><div id=\"m-orig\" class=\"meta-badge\" style=\"display:none\">0x0<\/div><\/div>\r\n            <div class=\"pnl\" data-label=\"RESIZED\"><img id=\"v-res\" style=\"display:none\"><div id=\"s-res\" class=\"size-badge\" style=\"background:var(--ank-cyan); color:var(--ank-dark); display:none\">0 KB<\/div><div id=\"m-res\" class=\"meta-badge\" style=\"background:rgba(34, 211, 238, 0.9); color:var(--ank-dark); display:none\">0x0<\/div><span id=\"wait-txt\" style=\"color:var(--ank-border); font-weight:900; font-size:11px;\">PREVIEW<\/span><\/div>\r\n        <\/div>\r\n\r\n        <!-- THUMBNAILS -->\r\n        <div class=\"ank-thumbs\" id=\"thumb-strip\"><\/div>\r\n\r\n        <div class=\"ank-foot\">\r\n            <input type=\"file\" id=\"bulk-res-in\" accept=\"image\/*\" multiple onchange=\"handleFileSelect(this)\" style=\"font-size:10px; font-weight:bold; width:180px; color:var(--ank-text);\">\r\n            <div style=\"display:flex; gap:8px;\">\r\n                <button onclick=\"location.reload()\" class=\"btn-main btn-reset\">Reset<\/button>\r\n                <button onclick=\"processBulkResize()\" id=\"run-btn\" class=\"btn-main\">Resize Images<\/button>\r\n                <button onclick=\"downloadZip()\" id=\"dl-zip\" class=\"btn-main btn-zip\">Download ZIP<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <script>\r\n            let rawUploadedFiles = [];\r\n            let processedData = [];\r\n\r\n            function handleFileSelect(input) {\r\n                if (input.files && input.files.length > 0) {\r\n                    rawUploadedFiles = Array.from(input.files);\r\n                    document.getElementById('info-box').innerText = rawUploadedFiles.length + \" FILE(S) LOADED\";\r\n                    document.getElementById('sys-tag').innerText = \"\u25cf READY\";\r\n\r\n                    const strip = document.getElementById('thumb-strip');\r\n                    strip.innerHTML = \"\"; strip.style.display = \"flex\";\r\n\r\n                    rawUploadedFiles.forEach((file, idx) => {\r\n                        const reader = new FileReader();\r\n                        reader.readAsDataURL(file);\r\n                        reader.onload = e => {\r\n                            const imgObj = new Image();\r\n                            imgObj.src = e.target.result;\r\n                            imgObj.onload = () => {\r\n                                const card = document.createElement('div'); card.className = \"t-card\";\r\n                                card.innerHTML = `\r\n                                    <div class=\"t-box ${idx === 0 ? 'active' : ''}\" onclick=\"previewRawImage(${idx})\" id=\"t-${idx}\"><img decoding=\"async\" src=\"${e.target.result}\"><\/div>\r\n                                    <button class=\"btn-save\" style=\"background:var(--ank-navy); color:var(--ank-muted);\" disabled>Raw<\/button>\r\n                                `;\r\n                                strip.appendChild(card);\r\n\r\n                                if (idx === 0) {\r\n                                    updateViewerAndInputs(imgObj, file.size, e.target.result);\r\n                                }\r\n                            };\r\n                        };\r\n                    });\r\n                }\r\n            }\r\n\r\n            function previewRawImage(idx) {\r\n                const file = rawUploadedFiles[idx];\r\n                const reader = new FileReader();\r\n                reader.readAsDataURL(file);\r\n                reader.onload = e => {\r\n                    const imgObj = new Image();\r\n                    imgObj.src = e.target.result;\r\n                    imgObj.onload = () => {\r\n                        updateViewerAndInputs(imgObj, file.size, e.target.result);\r\n                        document.querySelectorAll('.t-box').forEach((b, i) => b.classList.toggle('active', i === idx));\r\n                    };\r\n                };\r\n            }\r\n\r\n            function updateViewerAndInputs(imgObj, fileSize, dataUrl) {\r\n                document.getElementById('v-orig').src = dataUrl;\r\n                document.getElementById('v-orig').style.display = \"block\";\r\n                document.getElementById('s-orig').innerText = Math.round(fileSize \/ 1024) + \" KB\";\r\n                document.getElementById('m-orig').innerText = `${imgObj.width}x${imgObj.height} px`;\r\n                document.getElementById('s-orig').style.display = \"block\";\r\n                document.getElementById('m-orig').style.display = \"block\";\r\n\r\n                const preset = document.getElementById('ank-preset-mode').value;\r\n                if (preset === 'custom' || preset === 'percentage') {\r\n                    document.getElementById('ank-val-w').value = imgObj.width;\r\n                    document.getElementById('ank-val-h').value = imgObj.height;\r\n                    if (preset === 'custom') {\r\n                        document.getElementById('ank-lock-ratio').checked = false;\r\n                    }\r\n                }\r\n            }\r\n\r\n            function applyPreset(val) {\r\n                const wInput = document.getElementById('ank-val-w');\r\n                const hInput = document.getElementById('ank-val-h');\r\n                const lockToggle = document.getElementById('ank-lock-ratio');\r\n                \r\n                if (val === 'percentage') {\r\n                    hInput.disabled = true;\r\n                    wInput.placeholder = \"Scale %\";\r\n                    wInput.value = \"100\";\r\n                    lockToggle.checked = false;\r\n                } else if (val === 'custom') {\r\n                    hInput.disabled = false;\r\n                    wInput.placeholder = \"Width (px)\";\r\n                    lockToggle.checked = false;\r\n                    if (rawUploadedFiles.length > 0) {\r\n                        const reader = new FileReader();\r\n                        reader.onload = e => {\r\n                            const img = new Image();\r\n                            img.src = e.target.result;\r\n                            img.onload = () => {\r\n                                wInput.value = img.width;\r\n                                hInput.value = img.height;\r\n                            }\r\n                        };\r\n                        reader.readAsDataURL(rawUploadedFiles[0]);\r\n                    }\r\n                } else {\r\n                    hInput.disabled = false;\r\n                    wInput.placeholder = \"Width (px)\";\r\n                    lockToggle.checked = true;\r\n                    const parts = val.split('x');\r\n                    wInput.value = parts[0];\r\n                    hInput.value = parts[1];\r\n                }\r\n            }\r\n\r\n            async function processBulkResize() {\r\n                const files = rawUploadedFiles;\r\n                if (files.length === 0) return alert(\"Please select one or more images first!\");\r\n                \r\n                const btn = document.getElementById('run-btn');\r\n                btn.innerText = \"Resizing...\"; btn.disabled = true;\r\n                processedData = [];\r\n                const strip = document.getElementById('thumb-strip');\r\n                strip.innerHTML = \"\"; strip.style.display = \"flex\";\r\n                document.getElementById('wait-txt').style.display = \"none\";\r\n\r\n                const preset = document.getElementById('ank-preset-mode').value;\r\n                const inputW = parseFloat(document.getElementById('ank-val-w').value);\r\n                const inputH = parseFloat(document.getElementById('ank-val-h').value);\r\n                const lockRatio = document.getElementById('ank-lock-ratio').checked;\r\n                const fmt = document.getElementById('ank-res-format').value;\r\n                const quality = parseFloat(document.getElementById('ank-res-quality').value);\r\n\r\n                for (let i = 0; i < files.length; i++) {\r\n                    const res = await resizeImageFile(files[i], preset, inputW, inputH, lockRatio, fmt, quality);\r\n                    processedData.push(res);\r\n                    addThumbnail(res, i);\r\n                }\r\n                showView(0);\r\n                btn.innerText = \"Resize Images\"; btn.disabled = false;\r\n                document.getElementById('dl-zip').style.display = \"block\";\r\n                document.getElementById('sys-tag').innerText = \"\u25cf COMPLETE\";\r\n                document.getElementById('info-box').innerText = files.length + \" IMAGES RESIZED\";\r\n            }\r\n\r\n            function resizeImageFile(file, preset, userW, userH, lock, format, quality) {\r\n                return new Promise(resolve => {\r\n                    const reader = new FileReader();\r\n                    reader.readAsDataURL(file);\r\n                    reader.onload = e => {\r\n                        const img = new Image();\r\n                        img.src = e.target.result;\r\n                        img.onload = () => {\r\n                            const origW = img.width;\r\n                            const origH = img.height;\r\n                            let targetW = origW;\r\n                            let targetH = origH;\r\n\r\n                            if (preset === 'percentage') {\r\n                                const scale = Math.max(1, isNaN(userW) ? 100 : userW) \/ 100;\r\n                                targetW = Math.round(origW * scale);\r\n                                targetH = Math.round(origH * scale);\r\n                            } else {\r\n                                const hasW = !isNaN(userW) && userW > 0;\r\n                                const hasH = !isNaN(userH) && userH > 0;\r\n\r\n                                if (hasW && hasH && lock) {\r\n                                    targetW = userW;\r\n                                    targetH = Math.round(userW * (origH \/ origW));\r\n                                } else if (hasW && !hasH) {\r\n                                    targetW = userW;\r\n                                    targetH = lock ? Math.round(origH * (userW \/ origW)) : origH;\r\n                                } else if (!hasW && hasH) {\r\n                                    targetH = userH;\r\n                                    targetW = lock ? Math.round(origW * (userH \/ origH)) : origW;\r\n                                } else if (hasW && hasH && !lock) {\r\n                                    targetW = userW;\r\n                                    targetH = userH;\r\n                                }\r\n                            }\r\n\r\n                            targetW = Math.max(1, targetW);\r\n                            targetH = Math.max(1, targetH);\r\n\r\n                            const canvas = document.createElement('canvas');\r\n                            canvas.width = targetW;\r\n                            canvas.height = targetH;\r\n                            const ctx = canvas.getContext('2d');\r\n                            \r\n                            ctx.imageSmoothingEnabled = true;\r\n                            ctx.imageSmoothingQuality = 'high';\r\n\r\n                            if (format === 'jpeg') {\r\n                                ctx.fillStyle = \"#ffffff\";\r\n                                ctx.fillRect(0, 0, targetW, targetH);\r\n                            }\r\n\r\n                            ctx.drawImage(img, 0, 0, targetW, targetH);\r\n                            \r\n                            let mime = 'image\/jpeg';\r\n                            if (format === 'png') mime = 'image\/png';\r\n                            if (format === 'webp') mime = 'image\/webp';\r\n\r\n                            let currentQual = quality;\r\n                            let attemptCount = 0;\r\n\r\n                            function tryExport() {\r\n                                canvas.toBlob(blob => {\r\n                                    let finalBlob = blob || file;\r\n                                    \r\n                                    if (finalBlob.size > file.size && attemptCount < 4) {\r\n                                        attemptCount++;\r\n                                        currentQual = currentQual * 0.75;\r\n                                        tryExport();\r\n                                    } else {\r\n                                        if (finalBlob.size > file.size) {\r\n                                            finalBlob = file;\r\n                                        }\r\n\r\n                                        resolve({\r\n                                            name: file.name.split('.')[0],\r\n                                            orig: e.target.result,\r\n                                            res: URL.createObjectURL(finalBlob),\r\n                                            blob: finalBlob,\r\n                                            oSize: Math.round(file.size \/ 1024),\r\n                                            cSize: Math.round(finalBlob.size \/ 1024),\r\n                                            dim: `${origW}x${origH} px`,\r\n                                            newDim: `${targetW}x${targetH} px`,\r\n                                            ext: finalBlob === file ? file.name.split('.').pop() : (format === 'jpeg' ? 'jpg' : format)\r\n                                        });\r\n                                    }\r\n                                }, mime, currentQual);\r\n                            }\r\n\r\n                            tryExport();\r\n                        };\r\n                    };\r\n                });\r\n            }\r\n\r\n            function addThumbnail(d, i) {\r\n                const card = document.createElement('div'); card.className = \"t-card\";\r\n                card.innerHTML = `\r\n                    <div class=\"t-box ${i === 0 ? 'active' : ''}\" onclick=\"showView(${i})\" id=\"t-${i}\"><img decoding=\"async\" src=\"${d.res}\"><\/div>\r\n                    <button class=\"btn-save\" onclick=\"dlOne(${i})\">Save<\/button>\r\n                `;\r\n                document.getElementById('thumb-strip').appendChild(card);\r\n            }\r\n\r\n            function showView(i) {\r\n                const d = processedData[i];\r\n                document.getElementById('v-orig').src = d.orig; \r\n                document.getElementById('v-res').src = d.res;\r\n                document.getElementById('v-orig').style.display = document.getElementById('v-res').style.display = \"block\";\r\n                document.getElementById('s-orig').innerText = d.oSize + \" KB\"; \r\n                document.getElementById('s-res').innerText = d.cSize + \" KB\";\r\n                document.getElementById('m-orig').innerText = d.dim; \r\n                document.getElementById('m-res').innerText = d.newDim;\r\n                document.getElementById('s-orig').style.display = document.getElementById('s-res').style.display = \"block\";\r\n                document.getElementById('m-orig').style.display = document.getElementById('m-orig').style.display = \"block\";\r\n                document.getElementById('info-box').innerText = d.newDim + \" (\" + d.ext.toUpperCase() + \")\";\r\n                document.querySelectorAll('.t-box').forEach((b, idx) => b.classList.toggle('active', idx === i));\r\n            }\r\n\r\n            function dlOne(i) {\r\n                const d = processedData[i]; \r\n                const a = document.createElement('a');\r\n                a.href = d.res; \r\n                a.download = `AnkMaven-Resized-${d.name}.${d.ext}`; \r\n                a.click();\r\n            }\r\n\r\n            async function downloadZip() {\r\n                const zip = new JSZip(); \r\n                processedData.forEach(img => zip.file(`AnkMaven-${img.name}.${img.ext}`, img.blob));\r\n                const content = await zip.generateAsync({type: \"blob\"});\r\n                const a = document.createElement('a'); \r\n                a.href = URL.createObjectURL(content); \r\n                a.download = \"AnkMaven_Resized_Bulk.zip\"; \r\n                a.click();\r\n            }\r\n        <\/script>\r\n    <\/div>\r\n    <\/div>\n\t\t\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-49","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":4,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/49\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}