Watermark
Tool Watermark Gambar oleh AdinJava
* Gunakan drag untuk geser watermark
© AdinJava. Untuk menghapus kredit, hubungi kami untuk versi lisensi premium.
Tool Watermark Gratis
Berikut ini adalah kode lengkap untuk tool watermark gratis, pasang pada halaman blog sobat
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Watermark Tool Lengkap oleh AdinJava</title>
<style>
* { box-sizing: border-box; }
body {
font-family: sans-serif;
background: #f9f9f9;
margin: 0; padding: 1rem;
}
.container {
max-width: 1000px; margin: auto;
}
canvas {
width: 100%; max-width: 100%;
border: 1px solid #ccc; margin-top: 1rem;
}
.controls {
display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;
}
.control-group {
flex: 1 1 150px; display: flex; flex-direction: column; align-items: start;
}
.control-group input,
.control-group select {
width: 100%; padding: 0.25rem; font-size: 0.9rem;
}
.small-btn {
padding: 0.25rem 0.5rem; font-size: 0.8rem;
}
.drag-indicator {
font-size: 0.75rem; margin-top: 0.25rem; color: gray;
}
@media(max-width: 600px){
.control-group { flex: 1 1 100%; }
}
.credit {
margin-top: 1rem;
font-size: 0.85rem;
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h2>Tool Watermark Gambar Gratis</a></h2>
<div class="controls">
<div class="control-group">
<label for="imgInput">Pilih Gambar</label>
<input type="file" id="imgInput" accept="image/*" />
</div>
<div class="control-group">
<label for="textInput">Teks Watermark</label>
<input type="text" id="textInput" placeholder="Teks watermark" />
</div>
<div class="control-group">
<label for="logoInput">Logo Watermark</label>
<input type="file" id="logoInput" accept="image/*" />
</div>
<div class="control-group">
<label>Font</label>
<select id="fontSelect">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Courier New">Courier New</option>
<option value="Georgia">Georgia</option>
</select>
</div>
<div class="control-group">
<label>Ukuran</label>
<input type="range" id="sizeRange" min="10" max="200" value="40" />
</div>
<div class="control-group">
<label>Transparansi</label>
<input type="range" id="opacityRange" min="0" max="1" step="0.1" value="0.5" />
</div>
<div class="control-group">
<label>Rotasi</label>
<input type="range" id="rotateRange" min="-180" max="180" value="0" />
</div>
<div class="control-group">
<label>Warna Teks</label>
<input type="color" id="colorPicker" value="#000000" />
</div>
<div class="control-group" style="flex-direction: row; align-items: center; gap: 0.5rem;">
<label><input type="checkbox" id="repeatWatermark" /> Watermark Menyilang</label>
<button onclick="resetSettings()" class="small-btn">Reset</button>
</div>
<div class="control-group">
<label>Jarak Menyilang</label>
<input type="range" id="spacingRange" min="50" max="800" value="200" />
</div>
<div class="control-group">
<label>Ekspor</label>
<select id="exportType">
<option value="image/png">PNG</option>
<option value="image/jpeg">JPG</option>
<option value="image/webp">WebP</option>
</select>
</div>
</div>
<div class="preview-wrapper">
<canvas id="previewCanvas"></canvas>
<div class="drag-indicator">* Gunakan drag untuk geser watermark</div>
</div>
<div class="control-group" style="margin-top: 1rem;">
<label> </label>
<button id="downloadBtn" class="small-btn" disabled>Download Gambar</button>
</div>
<br />
<div class="credit" id="credit">
© <a href="https://adinjava.blogspot.com" target="_blank" rel="noopener noreferrer">AdinJava</a>.
Untuk menghapus kredit, hubungi kami untuk versi lisensi premium.
</div>
</div>
<script>
const canvas = document.getElementById("previewCanvas");
const ctx = canvas.getContext("2d");
const downloadBtn = document.getElementById("downloadBtn");
const creditDiv = document.getElementById("credit");
let originalImage = null;
let watermarkText = "";
let watermarkImage = null;
let dragOffset = { x: 0, y: 0 };
let watermarkPosition = { x: 100, y: 100 };
let isDragging = false;
function resizeCanvas(width, height) {
canvas.width = width;
canvas.height = height;
}
function renderCanvas() {
if (!originalImage) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(watermarkPosition.x, watermarkPosition.y);
ctx.rotate((parseFloat(document.getElementById("rotateRange").value) * Math.PI) / 180);
ctx.globalAlpha = parseFloat(document.getElementById("opacityRange").value);
const fontSize = parseInt(document.getElementById("sizeRange").value);
const font = `${fontSize}px ${document.getElementById("fontSelect").value}`;
const color = document.getElementById("colorPicker").value;
const isRepeat = document.getElementById("repeatWatermark").checked;
if (isRepeat) {
const spacing = parseInt(document.getElementById("spacingRange").value);
for (let y = -canvas.height; y < canvas.height * 2; y += spacing) {
for (let x = -canvas.width; x < canvas.width * 2; x += spacing) {
if (watermarkText) {
ctx.font = font;
ctx.fillStyle = color;
ctx.fillText(watermarkText, x, y);
}
if (watermarkImage) {
const aspectRatio = watermarkImage.width / watermarkImage.height || 1;
const width = fontSize * aspectRatio;
const height = fontSize;
ctx.drawImage(watermarkImage, x, y, width, height);
}
}
}
} else {
if (watermarkText) {
ctx.font = font;
ctx.fillStyle = color;
ctx.fillText(watermarkText, 0, 0);
}
if (watermarkImage) {
const aspectRatio = watermarkImage.width / watermarkImage.height || 1;
const width = fontSize * aspectRatio;
const height = fontSize;
ctx.drawImage(watermarkImage, 0, 0, width, height);
}
}
ctx.restore();
}
function checkCredit() {
if (document.body.contains(creditDiv)) {
downloadBtn.disabled = false;
} else {
downloadBtn.disabled = true;
alert("Kredit AdinJava harus ada untuk bisa download.");
}
}
// Drag events
canvas.addEventListener("mousedown", (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
isDragging = true;
dragOffset.x = x - watermarkPosition.x;
dragOffset.y = y - watermarkPosition.y;
});
canvas.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const rect = canvas.getBoundingClientRect();
watermarkPosition.x = e.clientX - rect.left - dragOffset.x;
watermarkPosition.y = e.clientY - rect.top - dragOffset.y;
renderCanvas();
});
canvas.addEventListener("mouseup", () => (isDragging = false));
canvas.addEventListener("mouseleave", () => (isDragging = false));
// Input change handlers
[
"textInput",
"fontSelect",
"sizeRange",
"opacityRange",
"rotateRange",
"colorPicker",
"repeatWatermark",
"spacingRange",
].forEach((id) =>
document.getElementById(id).addEventListener("input", () => {
watermarkText = document.getElementById("textInput").value;
renderCanvas();
})
);
// Image input
document.getElementById("imgInput").addEventListener("change", (e) => {
const file = e.target.files[0];
if (!file) return;
const img = new Image();
img.onload = () => {
originalImage = img;
resizeCanvas(img.width, img.height);
watermarkPosition = { x: img.width / 2, y: img.height / 2 };
renderCanvas();
checkCredit();
};
img.src = URL.createObjectURL(file);
});
// Logo input
document.getElementById("logoInput").addEventListener("change", (e) => {
const file = e.target.files[0];
if (!file) return;
const img = new Image();
img.onload = () => {
watermarkImage = img;
renderCanvas();
};
img.src = URL.createObjectURL(file);
});
// Reset settings
function resetSettings() {
document.getElementById("textInput").value = "";
document.getElementById("fontSelect").value = "Arial";
document.getElementById("sizeRange").value = 40;
document.getElementById("opacityRange").value = 0.5;
document.getElementById("rotateRange").value = 0;
document.getElementById("colorPicker").value = "#000000";
document.getElementById("repeatWatermark").checked = false;
document.getElementById("spacingRange").value = 200;
watermarkText = "";
watermarkImage = null;
renderCanvas();
}
// Download button handler
downloadBtn.addEventListener("click", () => {
if (!originalImage) {
alert("Silakan pilih gambar terlebih dahulu.");
return;
}
if (!document.body.contains(creditDiv)) {
alert("Kredit AdinJava harus ada untuk bisa download.");
return;
}
const exportType = document.getElementById("exportType").value;
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "watermarked-image." + exportType.split("/")[1];
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}, exportType);
});
</script>
</body>
</html>
Untuk Tutorialnya cara memasang watermark pada foto dan juga memasang tools ini pada CMS atau blog kamu, bisa buka link berikut ini: https://adinjava.blogspot.com/2025/06/cara-membuat-gambar-watermark-foto.html