{% extends "en/base.html" %}

{% block meta_description %}
<meta name="description" content="Add watermarks to your images easily with our watermarking tool. Protect your images and add branding effortlessly.">
{% endblock %}

{% block title %}Image Watermarking Tool online | ToolsForImage | Comprehensive Free Online Tools for Blur Faces, Image Conversion, Editing, Resizing, Remove Background, Blur background and More{% endblock %}

{% block content %}
<h1>Free Image Watermarking Tool</h1>

<div class="watermark-editor">
    <div class="watermark-controls">
        <label for="imageUpload">Upload Image:</label>
        <input type="file" id="imageUpload" accept="image/*">
        
        <label for="watermarkText">Watermark Text:</label>
        <input type="text" id="watermarkText" placeholder="Enter watermark text">
        
        <label for="watermarkColor">Watermark Color:</label>
        <input type="color" id="watermarkColor" value="#000000">
        
        <label for="watermarkOpacity">Watermark Opacity:</label>
        <input type="range" id="watermarkOpacity" min="0" max="1" step="0.1" value="0.5">
        
        <label for="watermarkFontSize">Watermark Font Size:</label>
        <input type="number" id="watermarkFontSize" min="8" value="20" placeholder="Font size">
        
        <label for="watermarkPosition">Watermark Position:</label>
        <select id="watermarkPosition">
            <option value="top-left">Top Left</option>
            <option value="top-right">Top Right</option>
            <option value="bottom-left">Bottom Left</option>
            <option value="bottom-right">Bottom Right</option>
            <option value="center">Center</option>
        </select>
        
        <label for="watermarkFontStyle">Watermark Font Style:</label>
        <select id="watermarkFontStyle">
            <option value="normal">Normal</option>
            <option value="bold">Bold</option>
            <option value="italic">Italic</option>
            <option value="bold-italic">Bold Italic</option>
        </select>
    </div>

    <div class="watermark-preview">
        <img id="previewImage" src="" alt="Preview">
    </div>

    <button class="button" id="downloadImage">Download Watermarked Image</button>
</div>

<div class="info-container">
    <div class="info-section">
        <h2>What is Image Watermarking?</h2>
        <p>Image watermarking is the process of adding a logo, text, or symbol to your images to protect them from unauthorized use. A watermark can be a small, semi-transparent mark placed anywhere on the image. This tool helps you add watermarks easily, ensuring that your photos, graphics, or digital creations are protected and easily identified as yours.</p>
    </div>

    <div class="info-section">
        <h2>Why Use Watermarks on Your Images?</h2>
        <p>Watermarking your images is important for several reasons:</p>
        <ul>
            <li><strong>Protect Your Work:</strong> Prevent others from stealing or using your images without permission by adding a watermark.</li>
            <li><strong>Build Your Brand:</strong> Adding a watermark with your logo or brand name can increase visibility and brand recognition.</li>
            <li><strong>Share Safely Online:</strong> When sharing images on social media, blogs, or websites, a watermark can help safeguard your intellectual property.</li>
        </ul>
    </div>

    <div class="info-section">
        <h2>How to Use Our Watermarking Tool</h2>
        <p>Our watermarking tool is easy to use and helps you quickly add a watermark to your images. Follow these steps:</p>
        <ul>
            <li>Click the "Upload from Computer" button to upload your image.</li>
            <li>Enter the text or upload your logo to be used as a watermark.</li>
            <li>Adjust the size, opacity, and position of your watermark to your liking.</li>
            <li>Once you are satisfied, click "Download Watermarked Image" to save your protected image to your device.</li>
        </ul>
        <p>Our tool supports various image formats, including PNG, JPG, and BMP, and ensures that the quality of your image is maintained.</p>
    </div>

    <div class="info-section">
        <h2>Benefits of Using Our Watermarking Tool</h2>
        <p>Here are the top benefits of using our watermarking tool:</p>
        <ul>
            <li><strong>Quick and Easy:</strong> Add a watermark to your images in just a few clicks, no design skills needed.</li>
            <li><strong>Customizable Watermarks:</strong> Choose the text, font, size, and placement that best suits your needs.</li>
            <li><strong>Protect Your Images:</strong> Make sure your images are protected and recognized as your work online.</li>
            <li><strong>Free to Use:</strong> Our tool is free and accessible, with no software downloads required.</li>
        </ul>
    </div>

    <div class="info-section">
        <h2>Common Use Cases for Image Watermarking</h2>
        <p>Watermarking is useful in many situations, such as:</p>
        <ul>
            <li><strong>Photographers:</strong> Protect your photography from unauthorized use by adding your name or logo.</li>
            <li><strong>Graphic Designers:</strong> Add a watermark to your digital artwork to prevent others from claiming it as their own.</li>
            <li><strong>Businesses and Brands:</strong> Use watermarks to promote your brand and ensure your images are recognized as your own.</li>
            <li><strong>Content Creators:</strong> Ensure your original content is protected when sharing on social media or websites.</li>
        </ul>
    </div>

    <div class="info-section">
        <h2>Why Watermarking Your Images is Important</h2>
        <p>Watermarking helps protect your images from being stolen or misused. Here’s why it’s important:</p>
        <ul>
            <li><strong>Copyright Protection:</strong> Watermarks act as a deterrent to those who might try to use your images without permission.</li>
            <li><strong>Increase Brand Awareness:</strong> When your watermark includes your logo or brand name, it helps spread awareness of your business as your images are shared online.</li>
            <li><strong>Keep Your Work Safe:</strong> Whether you’re a photographer, designer, or content creator, watermarking ensures that your hard work is credited to you, wherever it’s displayed.</li>
        </ul>
    </div>
</div>

<style>
    #downloadImage {
        background-color: var(--background-color);
        color: var(--box-hover-color);
        border: 2px solid var(--box-hover-color);
        padding: 10px 20px;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.3s;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    .watermark-editor {
        background-color: var(--box-color);
        border: 1px solid var(--secondary-color);
        padding: 2em;
        margin-top: 2em;
        border-radius: 5px;
        align-items: center;
    }

    .watermark-controls {
        display: flex;
        flex-direction: column;
        gap: 1em;
        margin-bottom: 1em;
        border-radius: 5px;
    }

    .watermark-controls input, .watermark-controls select {
        padding: 0.5em;
        font-size: 1em;
        border-radius: 5px;
    }

    .watermark-preview {
        width: 100%;
        height: 400px;
        border: 1px solid var(--secondary-color);
        margin-bottom: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        border-radius: 5px;
    }

    .watermark-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .watermark-text {
        position: absolute;
        cursor: move;
        user-select: none;
    }

    .button {
        background-color: var(--link-hover-color);
        color: var(--background-color);
        border: none;
        padding: 0.5em 1em;
        font-size: 1em;
        cursor: pointer;
        transition: background-color 0.3s;
        border-radius: 5px;
    }

    .button:hover {
        background-color: var(--link-hover-color);
        color: var(--box-color);
    }

    li {
        line-height: 1.6;
    }
</style>

<script>
    const imageUpload = document.getElementById('imageUpload');
    const watermarkText = document.getElementById('watermarkText');
    const watermarkColor = document.getElementById('watermarkColor');
    const watermarkOpacity = document.getElementById('watermarkOpacity');
    const watermarkFontSize = document.getElementById('watermarkFontSize');
    const watermarkPosition = document.getElementById('watermarkPosition');
    const watermarkFontStyle = document.getElementById('watermarkFontStyle');
    const previewImage = document.getElementById('previewImage');
    const downloadButton = document.getElementById('downloadImage');

    let originalImage = null;

    imageUpload.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = (event) => {
            originalImage = new Image();
            originalImage.onload = () => {
                previewImage.src = originalImage.src;
                applyWatermark(); // Apply watermark when the image is loaded
            };
            originalImage.src = event.target.result;
        };

        reader.readAsDataURL(file);
    });

    // Debounce function to limit the rate of applying watermark
    function debounce(func, delay) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), delay);
        };
    }

    // Add event listeners for real-time updates with debouncing
    const debouncedApplyWatermark = debounce(applyWatermark, 200); // 200ms delay
    watermarkText.addEventListener('input', debouncedApplyWatermark);
    watermarkColor.addEventListener('input', debouncedApplyWatermark);
    watermarkOpacity.addEventListener('input', debouncedApplyWatermark);
    watermarkFontSize.addEventListener('input', debouncedApplyWatermark);
    watermarkPosition.addEventListener('change', debouncedApplyWatermark);
    watermarkFontStyle.addEventListener('change', debouncedApplyWatermark);

    downloadButton.addEventListener('click', downloadWatermarkedImage);

    function applyWatermark() {
        if (!originalImage) {
            return;
        }

        // Create an offscreen canvas to apply watermark
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // Set canvas size to match the image size
        canvas.width = originalImage.width;
        canvas.height = originalImage.height;

        // Draw the original image onto the canvas
        ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);

        // Set the watermark text style
        const fontSize = parseInt(watermarkFontSize.value);
        const fontStyle = watermarkFontStyle.value;

        // Check if the font style includes both bold and italic
        let fullFontStyle = '';
        if (fontStyle === 'bold-italic') {
            fullFontStyle = 'bold italic';
        } else if (fontStyle === 'bold') {
            fullFontStyle = 'bold';
        } else if (fontStyle === 'italic') {
            fullFontStyle = 'italic';
        } else {
            fullFontStyle = 'normal';
        }

        // Apply the font settings to the canvas context
        ctx.font = `${fullFontStyle} ${fontSize}px Arial`;

        ctx.fillStyle = watermarkColor.value;
        ctx.globalAlpha = watermarkOpacity.value;

        // Get text dimensions
        const text = watermarkText.value;
        const textMetrics = ctx.measureText(text);
        const textWidth = textMetrics.width;
        const textHeight = fontSize; // Approximate height based on font size

        // Adjust for italic and bold font style
        let italicAdjustment = 0;
        if (fullFontStyle.includes('italic')) {
            italicAdjustment = fontSize * 0.2; // Adjust this factor as needed
        }

        // Calculate text position based on the selected alignment
        let x, y;
        const position = watermarkPosition.value;

        switch (position) {
            case 'top-left':
                x = 10 + italicAdjustment; // Add some padding
                y = textHeight + 10;
                break;
            case 'top-right':
                x = canvas.width - textWidth - 10 + italicAdjustment; // Right padding with italic adjustment
                y = textHeight + 10;
                break;
            case 'bottom-left':
                x = 10 + italicAdjustment; // Left padding
                y = canvas.height - 10; // Bottom padding
                break;
            case 'bottom-right':
                x = canvas.width - textWidth - 10 + italicAdjustment; // Right padding with italic adjustment
                y = canvas.height - 10; // Bottom padding
                break;
            case 'center':
                x = (canvas.width - textWidth) / 2 + italicAdjustment / 2;
                y = (canvas.height + textHeight) / 2;
                break;
            default:
                x = 10 + italicAdjustment;
                y = textHeight + 10;
        }

        // Debug: Log the font style to ensure it's set correctly
        console.log('Font style applied:', ctx.font);

        // Draw the watermark text on the canvas
        ctx.fillText(text, x, y);

        // Update the preview image with the canvas content
        previewImage.src = canvas.toDataURL();
    }

    function downloadWatermarkedImage() {
        if (!originalImage) {
            alert('Please upload an image first.');
            return;
        }

        const a = document.createElement('a');
        a.href = previewImage.src;
        a.download = 'watermarked_image.png';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
</script>
{% endblock %}