---
layout: default
title: Watermark Image - Add Watermarks to Images
description: Add text or image watermarks to your photos with position and opacity controls.
permalink: /playground/tools/watermark-image/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Watermark Image</h1>
        <p class="tool-description">Add text or image watermarks to protect your photos</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">🖼️</div>
            <div class="drop-zone-text">Click to select an image or drag it here</div>
            <div class="drop-zone-hint">Supports JPG, PNG, GIF, WebP</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/*">

        <div id="editorContainer" style="display: none; margin-top: 2rem;">
            <h3>Watermark Editor</h3>
            <div style="text-align: center; margin-top: 1rem;">
                <canvas id="canvas" style="border: 2px solid var(--tool-border); max-width: 100%;"></canvas>
            </div>
        </div>

        <div id="watermarkControls" style="display: none; margin-top: 2rem;">
            <h3>Watermark Type</h3>
            <div style="display: flex; gap: 1rem; margin-top: 1rem;">
                <label>
                    <input type="radio" name="watermarkType" value="text" checked>
                    Text Watermark
                </label>
                <label>
                    <input type="radio" name="watermarkType" value="image">
                    Image Watermark
                </label>
            </div>

            <div id="textWatermarkOptions" style="margin-top: 2rem;">
                <div class="input-group">
                    <label for="watermarkText">Watermark Text:</label>
                    <input type="text" id="watermarkText" value="© Your Name"
                           style="width: 100%; padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                </div>

                <div class="input-group">
                    <label for="fontSize">Font Size: <span id="fontSizeValue">40</span>px</label>
                    <input type="range" id="fontSize" min="10" max="200" value="40"
                           style="width: 100%; max-width: 300px;">
                </div>

                <div class="input-group">
                    <label for="fontColor">Text Color:</label>
                    <input type="color" id="fontColor" value="#ffffff"
                           style="padding: 0.25rem; border: 1px solid var(--tool-border); border-radius: 4px; cursor: pointer;">
                </div>
            </div>

            <div id="imageWatermarkOptions" style="display: none; margin-top: 2rem;">
                <div class="input-group">
                    <label for="watermarkImageInput">Select Watermark Image:</label>
                    <input type="file" id="watermarkImageInput" accept="image/*"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                </div>
            </div>

            <h3 style="margin-top: 2rem;">Position & Style</h3>
            <div class="input-group">
                <label for="opacity">Opacity: <span id="opacityValue">70</span>%</label>
                <input type="range" id="opacity" min="0" max="100" value="70"
                       style="width: 100%; max-width: 300px;">
            </div>

            <div class="input-group">
                <label>Quick Position:</label>
                <div class="grid-3-cols" style="max-width: 300px; margin-top: 0.5rem;">
                    <button class="btn btn-secondary position-btn" data-position="tl">Top Left</button>
                    <button class="btn btn-secondary position-btn" data-position="tc">Top Center</button>
                    <button class="btn btn-secondary position-btn" data-position="tr">Top Right</button>
                    <button class="btn btn-secondary position-btn" data-position="ml">Middle Left</button>
                    <button class="btn btn-secondary position-btn" data-position="mc">Center</button>
                    <button class="btn btn-secondary position-btn" data-position="mr">Middle Right</button>
                    <button class="btn btn-secondary position-btn" data-position="bl">Bottom Left</button>
                    <button class="btn btn-secondary position-btn" data-position="bc">Bottom Center</button>
                    <button class="btn btn-secondary position-btn" data-position="br">Bottom Right</button>
                </div>
                <div style="font-size: 0.9rem; color: var(--tool-text-secondary); margin-top: 0.5rem;">
                    You can also drag the watermark to position it
                </div>
            </div>

            <div class="input-group">
                <label for="outputFormat">Output Format:</label>
                <select id="outputFormat" style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px;">
                    <option value="png">PNG (Preserves transparency)</option>
                    <option value="jpeg">JPEG</option>
                    <option value="webp">WebP</option>
                </select>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="applyBtn" class="btn btn-secondary" style="display: none;">
                Apply Watermark
            </button>
            <button id="downloadBtn" class="btn btn-primary" style="display: none;">
                Download
            </button>
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Text or image watermarks</li>
            <li>Drag to position watermark</li>
            <li>9 quick position presets</li>
            <li>Adjustable opacity (0-100%)</li>
            <li>Custom font size and color</li>
            <li>Multiple output formats</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"
        integrity="sha384-NMLy6RgHw0defPJZoaU3sxvjmN+Xxp+o6KXGzJ/1vEg5mO1/vQtb5sU5M8YWXnRn"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>