Free Online Image Watermark Tool

← Back to Tools

Updated: 2026-07-11

📤

Drag & drop images here, or click to upload

Supports JPG, PNG, WebP, GIF, BMP, SVG — batch upload multiple images

⚙️ Watermark Settings

Watermark Type

Text Watermark

Image Watermark

Watermark Text

Font Style

Font Family

Font Size (px)

Color

Position

↖

↑

↗

←

⊙

→

↙

↓

↘

Horizontal Offset (px)

Vertical Offset (px)

Effect Settings

Opacity (%)

Rotation (°)

Tiled Mode

Text Shadow

Output Settings

Output Format

JPEG Quality (%)

📷 Preview

📁 Uploaded 0 images

📖 How to Use

The Online Image Watermark Tool is a pure frontend application — all image processing happens locally in your browser, with no uploads to any server. You can easily add text or image watermarks to protect your creative work.

1. Upload Images

Click the upload area or drag and drop images onto the page. Batch upload of multiple images is supported. Supported formats include JPG, PNG, WebP, GIF, BMP, and SVG.

2. Choose Watermark Type

The tool supports two watermark types:

Text Watermark: Enter your desired text, with customizable font, size, color, and other styles
Image Watermark: Upload your own watermark image (e.g., a logo), with adjustable size

3. Configure Watermark Parameters

Use the settings panel on the left to adjust watermark parameters:

Position: Click the grid to choose watermark position, with 9 preset positions available
Offset: Fine-tune the horizontal and vertical position of the watermark
Opacity: Adjust the transparency level, from 0% to 100%
Rotation: Rotate the watermark from -180° to 180°
Tiled Mode: When enabled, the watermark repeats across the entire image

4. Preview & Download

Click the "Apply Watermark" button to preview the effect. When satisfied, you can download a single image or batch download all processed images. PNG, JPEG, and WebP output formats are supported.

🎯 Use Cases

The Image Watermark Tool is useful in the following scenarios:

Copyright Protection: Add copyright notices to photography, design drafts to prevent unauthorized use
Brand Identity: Add logo watermarks to corporate promotional images and product photos
Social Sharing: Add personal tags or brand information to images shared on social media
Document Marking: Add confidential or draft markings to screenshots and document images
Batch Processing: Add uniform watermarks to large volumes of images at once, improving efficiency

💡 Extended Knowledge

Digital Watermarking is divided into visible and invisible watermarks. This tool uses visible watermarks — overlaying visible text or graphics onto the image. Invisible watermarks (steganography) embed hidden information by modifying pixel data, which cannot be detected by the human eye.

Watermark Best Practices: Watermarks should have moderate transparency (typically 30%-60%), providing protection without significantly affecting image viewing. Common positions include bottom-right, bottom-left, or image edges, avoiding main visual focal points.

Canvas API is the core technology behind this tool. It's an HTML5 drawing interface that enables direct image processing in the browser. Through the CanvasRenderingContext2D object, we can perform image drawing, text rendering, opacity adjustment, rotation, and more.

❓ Frequently Asked Questions

Is the image watermark tool free?

▼

Yes, completely free. This tool is a pure frontend application — all processing happens locally in your browser, with no images uploaded to any server.

What image formats are supported?

▼

Supports JPG/JPEG, PNG, WebP, GIF, BMP, and SVG formats. Output format can be set to PNG or JPEG.

Is my data safe?

▼

Yes, absolutely safe. All image processing happens locally in your browser. Your images and watermark files are never uploaded to any server, ensuring complete privacy protection.

Does it support batch processing?

▼

Yes. You can upload multiple images at once, apply the same watermark settings to all of them, and download all processed images in one go.

What text watermark properties can I customize?

▼

Text watermarks support customization of content, font family, font size, color, transparency, rotation angle, position (9 preset positions), and tiled mode.

What does Tiled Mode mean?

▼

Tiled Mode repeats the watermark across the entire image with regular spacing, ideal for scenarios requiring full coverage.

Will the downloaded image quality degrade?

▼

Download quality depends on the output format you choose. PNG supports lossless output. JPEG allows you to control file size and clarity via the quality parameter. We recommend a quality setting of 80%-90% for best results.

Why did my animated GIF become static?

▼

The current version extracts the first frame of animated GIFs and processes it as a static image. If you need to add watermarks to animated GIFs while preserving animation, please use a dedicated GIF editing tool.

'use strict'; const state = { images: [], currentIndex: 0, watermarkImage: null, watermarkType: 'text', processedCanvases: [] }; const uploadArea = document.getElementById('uploadArea'); const fileInput = document.getElementById('fileInput'); const toolLayout = document.getElementById('toolLayout'); const previewCanvas = document.getElementById('previewCanvas'); const ctx = previewCanvas.getContext('2d'); const thumbnails = document.getElementById('thumbnails'); const loading = document.getElementById('loading'); uploadArea.addEventListener('click', () => fileInput.click()); uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); }); uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover')); uploadArea.addEventListener('drop', (e) => { e.preventDefault(); uploadArea.classList.remove('dragover'); handleFiles(e.dataTransfer.files); }); fileInput.addEventListener('change', (e) => handleFiles(e.target.files)); function handleFiles(files) { const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/')); if (!imageFiles.length) return; loading.classList.add('show'); let loaded = 0; imageFiles.forEach(file => { const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { state.images.push({ file: file, image: img, name: file.name }); loaded++; if (loaded === imageFiles.length) { loading.classList.remove('show'); showToolLayout(); renderThumbnails(); setCurrentImage(0); } }; img.src = e.target.result; }; reader.readAsDataURL(file); }); } function showToolLayout() { uploadArea.style.display = 'none'; toolLayout.style.display = 'grid'; } function renderThumbnails() { thumbnails.innerHTML = ''; state.images.forEach((item, index) => { const div = document.createElement('div'); div.className = 'thumb-item' + (index === state.currentIndex ? ' active' : ''); div.innerHTML = '

' + escapeHtml(item.name) + '

'; div.querySelector('img').addEventListener('click', () => setCurrentImage(index)); div.querySelector('.thumb-remove').addEventListener('click', (e) => { e.stopPropagation(); removeImage(index); }); thumbnails.appendChild(div); }); document.getElementById('fileCount').textContent = state.images.length; } function setCurrentImage(index) { if (index < 0 || index >= state.images.length) return; state.currentIndex = index; renderThumbnails(); renderPreview(); } function removeImage(index) { state.images.splice(index, 1); state.processedCanvases.splice(index, 1); if (state.images.length === 0) { location.reload(); } else { setCurrentImage(Math.min(index, state.images.length - 1)); } } function renderPreview() { if (!state.images[state.currentIndex]) return; const img = state.images[state.currentIndex].image; const maxWidth = 800; const scale = Math.min(1, maxWidth / img.width); previewCanvas.width = img.width * scale; previewCanvas.height = img.height * scale; ctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height); ctx.drawImage(img, 0, 0, previewCanvas.width, previewCanvas.height); drawWatermark(ctx, previewCanvas.width, previewCanvas.height, img.width, img.height); } function drawWatermark(context, cw, ch, origW, origH) { const scale = cw / origW; if (state.watermarkType === 'text') { const text = document.getElementById('wmText').value || 'Watermark'; const fontSize = parseInt(document.getElementById('wmSize').value) * scale; const color = document.getElementById('wmColor').value; const opacity = parseInt(document.getElementById('wmOpacity').value) / 100; const rotate = parseInt(document.getElementById('wmRotate').value) * Math.PI / 180; const fontFamily = document.getElementById('wmFont').value; const shadow = document.getElementById('wmShadow').checked; const tiled = document.getElementById('wmTiled').checked; const pos = parseInt(document.querySelector('.pos-cell.active').dataset.pos); const offsetX = parseInt(document.getElementById('offsetX').value) * scale; const offsetY = parseInt(document.getElementById('offsetY').value) * scale; context.save(); context.globalAlpha = opacity; context.font = 'bold ' + fontSize + 'px ' + fontFamily; context.textAlign = 'center'; context.textBaseline = 'middle'; if (shadow) { context.shadowColor = 'rgba(0,0,0,0.5)'; context.shadowBlur = 4; context.shadowOffsetX = 2; context.shadowOffsetY = 2; } if (tiled) { const metrics = context.measureText(text); const tw = metrics.width; const th = fontSize; const gapX = tw * 2; const gapY = th * 2; for (let x = 0; x < cw + gapX; x += gapX) { for (let y = 0; y < ch + gapY; y += gapY) { context.save(); context.translate(x, y); context.rotate(rotate); context.fillStyle = color; context.fillText(text, 0, 0); context.restore(); } } } else { const metrics = context.measureText(text); const tw = metrics.width; const th = fontSize; let cx, cy; if (pos === 0) { cx = tw/2 + offsetX; cy = th/2 + offsetY; } else if (pos === 1) { cx = cw/2; cy = th/2 + offsetY; } else if (pos === 2) { cx = cw - tw/2 - offsetX; cy = th/2 + offsetY; } else if (pos === 3) { cx = tw/2 + offsetX; cy = ch/2; } else if (pos === 4) { cx = cw/2; cy = ch/2; } else if (pos === 5) { cx = cw - tw/2 - offsetX; cy = ch/2; } else if (pos === 6) { cx = tw/2 + offsetX; cy = ch - th/2 - offsetY; } else if (pos === 7) { cx = cw/2; cy = ch - th/2 - offsetY; } else { cx = cw - tw/2 - offsetX; cy = ch - th/2 - offsetY; } context.translate(cx, cy); context.rotate(rotate); context.fillStyle = color; context.fillText(text, 0, 0); } context.restore(); } else if (state.watermarkType === 'image' && state.watermarkImage) { const opacity = parseInt(document.getElementById('wmOpacity').value) / 100; const rotate = parseInt(document.getElementById('wmRotate').value) * Math.PI / 180; const wmSizePct = parseInt(document.getElementById('wmImgSize').value) / 100; const pos = parseInt(document.querySelector('.pos-cell.active').dataset.pos); const offsetX = parseInt(document.getElementById('offsetX').value) * scale; const offsetY = parseInt(document.getElementById('offsetY').value) * scale; const wm = state.watermarkImage; const maxWmW = cw * wmSizePct; const wmScale = maxWmW / wm.width; const wmW = wm.width * wmScale; const wmH = wm.height * wmScale; context.save(); context.globalAlpha = opacity; let cx, cy; if (pos === 0) { cx = wmW/2 + offsetX; cy = wmH/2 + offsetY; } else if (pos === 1) { cx = cw/2; cy = wmH/2 + offsetY; } else if (pos === 2) { cx = cw - wmW/2 - offsetX; cy = wmH/2 + offsetY; } else if (pos === 3) { cx = wmW/2 + offsetX; cy = ch/2; } else if (pos === 4) { cx = cw/2; cy = ch/2; } else if (pos === 5) { cx = cw - wmW/2 - offsetX; cy = ch/2; } else if (pos === 6) { cx = wmW/2 + offsetX; cy = ch - wmH/2 - offsetY; } else if (pos === 7) { cx = cw/2; cy = ch - wmH/2 - offsetY; } else { cx = cw - wmW/2 - offsetX; cy = ch - wmH/2 - offsetY; } context.translate(cx, cy); context.rotate(rotate); context.drawImage(wm, -wmW/2, -wmH/2, wmW, wmH); context.restore(); } } document.querySelectorAll('.type-tabs .tab').forEach(tab => { tab.addEventListener('click', () => { document.querySelectorAll('.type-tabs .tab').forEach(t => t.classList.remove('active')); tab.classList.add('active'); state.watermarkType = tab.dataset.type; document.getElementById('textSettings').style.display = state.watermarkType === 'text' ? 'block' : 'none'; document.getElementById('imageSettings').style.display = state.watermarkType === 'image' ? 'block' : 'none'; renderPreview(); }); }); document.querySelectorAll('.pos-cell').forEach(cell => { cell.addEventListener('click', () => { document.querySelectorAll('.pos-cell').forEach(c => c.classList.remove('active')); cell.classList.add('active'); renderPreview(); }); }); ['wmSize','wmOpacity','wmRotate','wmImgSize','jpegQuality'].forEach(id => { const el = document.getElementById(id); const valEl = document.getElementById(id + 'Val'); if (el && valEl) { el.addEventListener('input', () => { valEl.textContent = el.value; renderPreview(); }); } }); ['wmText','wmColor','wmFont','offsetX','offsetY'].forEach(id => { const el = document.getElementById(id); if (el) el.addEventListener('input', renderPreview); }); ['wmTiled','wmShadow'].forEach(id => { const el = document.getElementById(id); if (el) el.addEventListener('change', renderPreview); }); document.getElementById('selectWmImageBtn').addEventListener('click', () => { document.getElementById('wmImageInput').click(); }); document.getElementById('wmImageInput').addEventListener('change', (e) => { if (!e.target.files[0]) return; const reader = new FileReader(); reader.onload = (ev) => { const img = new Image(); img.onload = () => { state.watermarkImage = img; document.getElementById('wmImagePreview').innerHTML = '

'; renderPreview(); }; img.src = ev.target.result; }; reader.readAsDataURL(e.target.files[0]); }); document.getElementById('outputFormat').addEventListener('change', function() { document.getElementById('jpegQualityGroup').style.display = this.value === 'image/jpeg' ? 'block' : 'none'; }); document.getElementById('applyBtn').addEventListener('click', renderPreview); document.getElementById('downloadBtn').addEventListener('click', downloadCurrent); document.getElementById('downloadAllBtn').addEventListener('click', downloadAll); document.getElementById('resetBtn').addEventListener('click', () => location.reload()); document.getElementById('clearAllBtn').addEventListener('click', () => location.reload()); function downloadCurrent() { if (!state.images[state.currentIndex]) return; const img = state.images[state.currentIndex].image; const canvas = document.createElement('canvas'); const c = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; c.drawImage(img, 0, 0); const ctx2 = c; ctx2.save(); if (state.watermarkType === 'text') { const text = document.getElementById('wmText').value || 'Watermark'; const fontSize = parseInt(document.getElementById('wmSize').value); const color = document.getElementById('wmColor').value; const opacity = parseInt(document.getElementById('wmOpacity').value) / 100; const rotate = parseInt(document.getElementById('wmRotate').value) * Math.PI / 180; const fontFamily = document.getElementById('wmFont').value; const shadow = document.getElementById('wmShadow').checked; const tiled = document.getElementById('wmTiled').checked; const pos = parseInt(document.querySelector('.pos-cell.active').dataset.pos); const offsetX = parseInt(document.getElementById('offsetX').value); const offsetY = parseInt(document.getElementById('offsetY').value); const cw = canvas.width; const ch = canvas.height; ctx2.globalAlpha = opacity; ctx2.font = 'bold ' + fontSize + 'px ' + fontFamily; ctx2.textAlign = 'center'; ctx2.textBaseline = 'middle'; if (shadow) { ctx2.shadowColor = 'rgba(0,0,0,0.5)'; ctx2.shadowBlur = 4; ctx2.shadowOffsetX = 2; ctx2.shadowOffsetY = 2; } if (tiled) { const metrics = ctx2.measureText(text); const tw = metrics.width; const th = fontSize; const gapX = tw * 2; const gapY = th * 2; for (let x = 0; x < cw + gapX; x += gapX) { for (let y = 0; y < ch + gapY; y += gapY) { ctx2.save(); ctx2.translate(x, y); ctx2.rotate(rotate); ctx2.fillStyle = color; ctx2.fillText(text, 0, 0); ctx2.restore(); } } } else { const metrics = ctx2.measureText(text); const tw = metrics.width; const th = fontSize; let cx, cy; if (pos === 0) { cx = tw/2 + offsetX; cy = th/2 + offsetY; } else if (pos === 1) { cx = cw/2; cy = th/2 + offsetY; } else if (pos === 2) { cx = cw - tw/2 - offsetX; cy = th/2 + offsetY; } else if (pos === 3) { cx = tw/2 + offsetX; cy = ch/2; } else if (pos === 4) { cx = cw/2; cy = ch/2; } else if (pos === 5) { cx = cw - tw/2 - offsetX; cy = ch/2; } else if (pos === 6) { cx = tw/2 + offsetX; cy = ch - th/2 - offsetY; } else if (pos === 7) { cx = cw/2; cy = ch - th/2 - offsetY; } else { cx = cw - tw/2 - offsetX; cy = ch - th/2 - offsetY; } ctx2.translate(cx, cy); ctx2.rotate(rotate); ctx2.fillStyle = color; ctx2.fillText(text, 0, 0); } } else if (state.watermarkType === 'image' && state.watermarkImage) { const wm = state.watermarkImage; const opacity = parseInt(document.getElementById('wmOpacity').value) / 100; const rotate = parseInt(document.getElementById('wmRotate').value) * Math.PI / 180; const wmSizePct = parseInt(document.getElementById('wmImgSize').value) / 100; const pos = parseInt(document.querySelector('.pos-cell.active').dataset.pos); const offsetX = parseInt(document.getElementById('offsetX').value); const offsetY = parseInt(document.getElementById('offsetY').value); const cw = canvas.width; const ch = canvas.height; const maxWmW = cw * wmSizePct; const wmScale = maxWmW / wm.width; const wmW = wm.width * wmScale; const wmH = wm.height * wmScale; ctx2.globalAlpha = opacity; let cx, cy; if (pos === 0) { cx = wmW/2 + offsetX; cy = wmH/2 + offsetY; } else if (pos === 1) { cx = cw/2; cy = wmH/2 + offsetY; } else if (pos === 2) { cx = cw - wmW/2 - offsetX; cy = wmH/2 + offsetY; } else if (pos === 3) { cx = wmW/2 + offsetX; cy = ch/2; } else if (pos === 4) { cx = cw/2; cy = ch/2; } else if (pos === 5) { cx = cw - wmW/2 - offsetX; cy = ch/2; } else if (pos === 6) { cx = wmW/2 + offsetX; cy = ch - wmH/2 - offsetY; } else if (pos === 7) { cx = cw/2; cy = ch - wmH/2 - offsetY; } else { cx = cw - wmW/2 - offsetX; cy = ch - wmH/2 - offsetY; } ctx2.translate(cx, cy); ctx2.rotate(rotate); ctx2.drawImage(wm, -wmW/2, -wmH/2, wmW, wmH); } ctx2.restore(); const format = document.getElementById('outputFormat').value; const quality = format === 'image/jpeg' ? parseInt(document.getElementById('jpegQuality').value) / 100 : undefined; const ext = format === 'image/png' ? 'png' : format === 'image/webp' ? 'webp' : 'jpg'; canvas.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'watermarked_' + state.images[state.currentIndex].name.replace(/\.[^.]+$/, '') + '.' + ext; a.click(); URL.revokeObjectURL(url); }, format, quality); } function downloadAll() { const current = state.currentIndex; state.images.forEach((_, i) => { setCurrentImage(i); downloadCurrent(); }); setCurrentImage(current); } function escapeHtml(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } document.querySelectorAll('.faq-question').forEach(q => { q.addEventListener('click', () => { q.parentElement.classList.toggle('active'); }); });

🖼️ Online Image Watermark Tool