{"id":56,"date":"2026-09-10T11:45:39","date_gmt":"2026-09-10T11:45:39","guid":{"rendered":"https:\/\/ankmavenmarketing.in\/tools\/?page_id=56"},"modified":"2026-09-10T11:56:59","modified_gmt":"2026-09-10T11:56:59","slug":"online-bulk-image-watermark-tool","status":"publish","type":"page","link":"https:\/\/ankmavenmarketing.in\/tools\/online-bulk-image-watermark-tool\/","title":{"rendered":"Online Bulk Watermark Tool"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"56\" class=\"elementor elementor-56\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c98290a e-flex e-con-boxed e-con e-parent\" data-id=\"c98290a\" 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-110c31d elementor-widget elementor-widget-shortcode\" data-id=\"110c31d\" 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 Batch 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 Ultimate Watermarker UI (Brand Themed) -->\r\n    <div id=\"ank-ultimate-watermarker\">\r\n        <style>\r\n            #ank-ultimate-watermarker {\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-watermarker * { 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            \/* 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\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 PRO IMAGE WATERMARKER v2.2<\/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 Ultimate Watermarker Suite:<\/span>\r\n            <div class=\"ank-guide-tags\">\r\n                <div class=\"ank-guide-tag\">Custom Text & Brand Logo<\/div>\r\n                <div class=\"ank-guide-tag\">Strict Size-Guard Protection<\/div>\r\n                <div class=\"ank-guide-tag\">Position & Opacity Control<\/div>\r\n                <div class=\"ank-guide-tag\">Batch ZIP Export<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ROW 1: TEXT & STYLING -->\r\n        <div class=\"ank-opt-row\">\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">1. Watermark Text<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <input type=\"text\" id=\"wm-text\" class=\"ank-ctrl-box\" placeholder=\"\u00a9 Ank Maven Marketing\" value=\"\u00a9 Ank Maven Marketing\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">2. Text Color & Size<\/span>\r\n                <div class=\"ank-ctrl-wrap\" style=\"gap:4px;\">\r\n                    <input type=\"color\" id=\"wm-color\" value=\"#ffffff\" style=\"width:35px; height:25px; border:none; background:none; cursor:pointer;\">\r\n                    <select id=\"wm-size\" class=\"ank-ctrl-box\" style=\"flex:1;\">\r\n                        <option value=\"20\">Small (20px)<\/option>\r\n                        <option value=\"32\" selected>Medium (32px)<\/option>\r\n                        <option value=\"48\">Large (48px)<\/option>\r\n                        <option value=\"64\">Extra Large (64px)<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">3. Position<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <select id=\"wm-pos\" class=\"ank-ctrl-box\">\r\n                        <option value=\"bottom-right\" selected>Bottom Right<\/option>\r\n                        <option value=\"bottom-left\">Bottom Left<\/option>\r\n                        <option value=\"top-right\">Top Right<\/option>\r\n                        <option value=\"top-left\">Top Left<\/option>\r\n                        <option value=\"center\">Center Stamp<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">4. Transparency (Opacity)<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <input type=\"range\" id=\"wm-opacity\" min=\"0.1\" max=\"1\" step=\"0.1\" value=\"0.75\" style=\"width:100%; accent-color:var(--ank-cyan); cursor:pointer;\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- ROW 2: FORMAT & LOGO -->\r\n        <div class=\"ank-opt-row row-2\">\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">5. Optional Logo Stamp<\/span>\r\n                <div class=\"ank-ctrl-wrap\" style=\"padding:4px 0;\">\r\n                    <input type=\"file\" id=\"wm-logo-in\" accept=\"image\/*\" style=\"font-size:8px; color:var(--ank-text);\">\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"ank-group\">\r\n                <span class=\"ank-label\">6. Output Format<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <select id=\"wm-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\">7. Export Quality<\/span>\r\n                <div class=\"ank-ctrl-wrap\">\r\n                    <select id=\"wm-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\">\r\n                <span class=\"ank-label\">8. 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>\r\n            <div class=\"pnl\" data-label=\"WATERMARKED\"><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><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=\"watermark-file-in\" accept=\"image\/*\" multiple onchange=\"handleWatermarkFiles(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=\"processWatermarking()\" id=\"run-wm-btn\" class=\"btn-main\">Apply Watermark<\/button>\r\n                <button onclick=\"downloadWatermarkZip()\" id=\"dl-wm-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 processedWatermarks = [];\r\n\r\n            function handleWatermarkFiles(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) SELECTED\";\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 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                            if (idx === 0) {\r\n                                document.getElementById('v-orig').src = e.target.result;\r\n                                document.getElementById('v-orig').style.display = \"block\";\r\n                                document.getElementById('s-orig').innerText = Math.round(file.size \/ 1024) + \" KB\";\r\n                                document.getElementById('s-orig').style.display = \"block\";\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                    document.getElementById('v-orig').src = e.target.result;\r\n                    document.getElementById('v-orig').style.display = \"block\";\r\n                    document.getElementById('s-orig').innerText = Math.round(file.size \/ 1024) + \" KB\";\r\n                    document.getElementById('s-orig').style.display = \"block\";\r\n                    document.querySelectorAll('.t-box').forEach((b, i) => b.classList.toggle('active', i === idx));\r\n                };\r\n            }\r\n\r\n            async function processWatermarking() {\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-wm-btn');\r\n                btn.innerText = \"Processing...\"; btn.disabled = true;\r\n                processedWatermarks = [];\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 text = document.getElementById('wm-text').value;\r\n                const color = document.getElementById('wm-color').value;\r\n                const size = parseInt(document.getElementById('wm-size').value) || 32;\r\n                const pos = document.getElementById('wm-pos').value;\r\n                const opacity = parseFloat(document.getElementById('wm-opacity').value) || 0.75;\r\n                const fmt = document.getElementById('wm-format').value;\r\n                const quality = parseFloat(document.getElementById('wm-quality').value);\r\n                const logoInput = document.getElementById('wm-logo-in').files[0];\r\n\r\n                let logoImg = null;\r\n                if (logoInput) {\r\n                    logoImg = await loadLogoImage(logoInput);\r\n                }\r\n\r\n                for (let i = 0; i < files.length; i++) {\r\n                    const res = await applyWatermarkToFile(files[i], text, color, size, pos, opacity, fmt, quality, logoImg);\r\n                    processedWatermarks.push(res);\r\n                    addWatermarkThumbnail(res, i);\r\n                }\r\n                showWatermarkView(0);\r\n                btn.innerText = \"Apply Watermark\"; btn.disabled = false;\r\n                document.getElementById('dl-wm-zip').style.display = \"block\";\r\n                document.getElementById('sys-tag').innerText = \"\u25cf COMPLETE\";\r\n                document.getElementById('info-box').innerText = files.length + \" IMAGES WATERMARKED\";\r\n            }\r\n\r\n            function loadLogoImage(file) {\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 = () => resolve(img);\r\n                    };\r\n                });\r\n            }\r\n\r\n            function applyWatermarkToFile(file, text, color, size, pos, opacity, format, quality, logoImg) {\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 canvas = document.createElement('canvas');\r\n                            canvas.width = img.width;\r\n                            canvas.height = img.height;\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, canvas.width, canvas.height);\r\n                            }\r\n\r\n                            ctx.drawImage(img, 0, 0);\r\n\r\n                            if (logoImg) {\r\n                                ctx.save();\r\n                                ctx.globalAlpha = opacity;\r\n                                const lH = Math.round(canvas.height * 0.12);\r\n                                const lW = Math.round(logoImg.width * (lH \/ logoImg.height));\r\n                                const padding = Math.round(canvas.width * 0.03);\r\n\r\n                                let lx = padding, ly = canvas.height - lH - padding;\r\n                                if (pos === 'top-left') { lx = padding; ly = padding; }\r\n                                if (pos === 'top-right') { lx = canvas.width - lW - padding; ly = padding; }\r\n                                if (pos === 'bottom-right') { lx = canvas.width - lW - padding; ly = canvas.height - lH - padding; }\r\n                                if (pos === 'center') { lx = (canvas.width - lW) \/ 2; ly = (canvas.height - lH) \/ 2; }\r\n\r\n                                ctx.drawImage(logoImg, lx, ly, lW, lH);\r\n                                ctx.restore();\r\n                            }\r\n\r\n                            if (text && text.trim() !== \"\") {\r\n                                ctx.save();\r\n                                const scaledSize = Math.max(16, Math.round(size * (img.width \/ 1000)));\r\n                                ctx.font = `bold ${scaledSize}px Inter, sans-serif`;\r\n                                ctx.fillStyle = color;\r\n                                ctx.globalAlpha = opacity;\r\n                                ctx.shadowColor = \"rgba(0, 0, 0, 0.8)\";\r\n                                ctx.shadowBlur = 4;\r\n                                ctx.shadowOffsetX = 2;\r\n                                ctx.shadowOffsetY = 2;\r\n\r\n                                const metrics = ctx.measureText(text);\r\n                                const textW = metrics.width;\r\n                                const padding = Math.round(img.width * 0.03);\r\n\r\n                                let x = padding, y = canvas.height - padding;\r\n                                if (pos === 'bottom-right') { x = canvas.width - textW - padding; y = canvas.height - padding; }\r\n                                else if (pos === 'bottom-left') { x = padding; y = canvas.height - padding; }\r\n                                else if (pos === 'top-right') { x = canvas.width - textW - padding; y = scaledSize + padding; }\r\n                                else if (pos === 'top-left') { x = padding; y = scaledSize + padding; }\r\n                                else if (pos === 'center') { x = (canvas.width - textW) \/ 2; y = canvas.height \/ 2; }\r\n\r\n                                ctx.fillText(text, x, y);\r\n                                ctx.restore();\r\n                            }\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 < 3 && format !== 'png') {\r\n                                        attemptCount++;\r\n                                        currentQual = currentQual * 0.75;\r\n                                        tryExport();\r\n                                    } else {\r\n                                        if (finalBlob.size > file.size && format !== 'png') {\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                                            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 addWatermarkThumbnail(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=\"showWatermarkView(${i})\" id=\"t-${i}\"><img decoding=\"async\" src=\"${d.res}\"><\/div>\r\n                    <button class=\"btn-save\" onclick=\"dlWatermarkOne(${i})\">Save<\/button>\r\n                `;\r\n                document.getElementById('thumb-strip').appendChild(card);\r\n            }\r\n\r\n            function showWatermarkView(i) {\r\n                const d = processedWatermarks[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('s-orig').style.display = document.getElementById('s-res').style.display = \"block\";\r\n                document.getElementById('s-res').style.display = document.getElementById('s-res').style.display = \"block\";\r\n                document.getElementById('info-box').innerText = \"WATERMARKED (\" + 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 dlWatermarkOne(i) {\r\n                const d = processedWatermarks[i]; \r\n                const a = document.createElement('a');\r\n                a.href = d.res; \r\n                a.download = `AnkMaven-Watermarked-${d.name}.${d.ext}`; \r\n                a.click();\r\n            }\r\n\r\n            async function downloadWatermarkZip() {\r\n                const zip = new JSZip(); \r\n                processedWatermarks.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_Watermarked_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-56","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\/56","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=56"}],"version-history":[{"count":12,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/56\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/pages\/56\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/ankmavenmarketing.in\/tools\/wp-json\/wp\/v2\/media?parent=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}