```html ওয়াটারমার্ক টুল

ওয়াটারমার্ক টুল

ছবি আপলোড করুন

ওয়াটারমার্ক টেক্সট

ওয়াটারমার্কের রঙ

ওয়াটারমার্কের সংখ্যা (১-২০)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ওয়াটারমার্ক টুল</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-blue-900 min-h-screen flex items-center justify-center">
    <div class="bg-black text-white p-8 rounded-lg shadow-lg w-full max-w-md">
        <h1 class="text-2xl font-bold mb-6 text-center">ওয়াটারমার্ক টুল</h1>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium mb-1">ছবি আপলোড করুন</label>
                <input type="file" id="imageInput" accept="image/*" class="w-full bg-gray-800 p-2 rounded text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">ওয়াটারমার্ক টেক্সট</label>
                <input type="text" id="watermarkText" placeholder="ওয়াটারমার্ক টেক্সট লিখুন" class="w-full bg-gray-800 p-2 rounded text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">ওয়াটারমার্কের রঙ</label>
                <input type="color" id="watermarkColor" value="#ffffff" class="w-full bg-gray-800 p-2 rounded h-10">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">ওয়াটারমার্কের সংখ্যা (১-২০)</label>
                <input type="number" id="watermarkCount" min="1" max="20" value="1" class="w-full bg-gray-800 p-2 rounded text-sm">
            </div>
            <button id="applyWatermark" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                ওয়াটারমার্ক যোগ করুন
            </button>
        </div>
        <div class="mt-6">
            <canvas id="canvas" class="w-full border border-gray-700 hidden"></canvas>
            <button id="downloadButton" class="hidden w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded text-center mt-4">
                ওয়াটারমার্ক করা ছবি ডাউনলোড করুন
            </button>
        </div>
    </div>

applyWatermark.addEventListener('click', (e) => {
            e.preventDefault();
            const file = imageInput.files[0];
            const text = watermarkText.value || 'ওয়াটারমার্ক';
            const color = watermarkColor.value;
            const count = Math.min(Math.max(parseInt(watermarkCount.value) || 1, 1), 20);

if (!file) {
                alert('দয়া করে একটি ছবি আপলোড করুন।');
                return;
            }

const img = new Image();
            img.onload = () => {
                canvas.width = img.width;
                canvas.height = img.height;
                canvas.classList.remove('hidden');
                ctx.drawImage(img, 0, 0);

ctx.font = '30px Arial';
                ctx.fillStyle = color;
                ctx.globalAlpha = 0.5;

const spacingX = img.width / (Math.ceil(Math.sqrt(count)));
                const spacingY = img.height / (Math.ceil(Math.sqrt(count)));
                let currentCount = 0;

for (let y = spacingY / 2; y < img.height && currentCount < count; y += spacingY) {
                    for (let x = spacingX / 2; x < img.width && currentCount < count; x += spacingX) {
                        ctx.fillText(text, x, y);
                        currentCount++;
                    }
                }

downloadButton.classList.remove('hidden');
            };
            img.src = URL.createObjectURL(file);
        });

downloadButton.addEventListener('click', (e) => {
            e.preventDefault();
            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png');
            link.download = 'watermarked_image.png';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
    </script>
</body>
</html>

```

ওয়াটারমার্ক টুল

Post a Comment

Popular Posts

Footer Menu Widget

Formulir Kontak