Cara Membuat Gambar Watermark Foto dengan Mudah dan Gratis

[Show]

Ingin memberi watermark pada foto sebelum membagikannya ke media sosial atau situs web? Kini kamu bisa melakukannya dengan gratis dan tanpa aplikasi tambahan langsung dari browser.

Cukup buka halaman alat watermark online buatan AdinJava dan tambahkan teks atau logo ke gambar secara instan.

Menambahkan watermark pada gambar kini tidak perlu aplikasi mahal atau software berat. Cukup buka browser dan gunakan Watermark Tool dari AdinJava — alat praktis yang dapat digunakan langsung secara online dan gratis!

🔗 Tutorial lengkap dan alatnya tersedia di sini:
👉 https://adinjava.blogspot.com/p/watermark.html

🔧 Fitur Utama:

Tambah teks watermark dengan pengaturan font, ukuran, warna, rotasi, dan transparansi.
Tambahkan logo PNG atau JPG ke atas gambar sebagai watermark.
Pilih watermark tunggal atau menyilang di seluruh gambar.
Drag watermark ke posisi bebas di dalam gambar.
Simpan hasil gambar ke format PNG, JPG, atau WebP.
Tombol download hanya aktif jika kredit AdinJava tetap ada di halaman.

📎 Kode Generator Watermark (Untuk Disematkan di Blog/CMS)

Kamu bisa menyematkan tool ini di halaman blog pribadi atau CMS milikmu. Cukup salin kode HTML di bawah ini, lalu tempelkan di halaman yang kamu inginkan.

⚠️ Penting: Jangan menghapus bagian kredit. Jika dihapus, fitur seperti tombol download tidak akan berfungsi, dan akan muncul peringatan otomatis.




  
    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>&nbsp;</label>
      <button id="downloadBtn" class="small-btn" disabled>Download Gambar</button>
    </div>
    <br />
    <div class="credit" id="credit">
      &copy; <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>

👀 Tampilan Alat (Preview)

Ketika kode di atas dimasukkan ke halaman blog atau website, pengguna akan melihat tampilan seperti ini:

✅ Upload gambar
✅ Tambah teks watermark atau logo
✅ Atur posisi, warna, ukuran, dan rotasi
✅ Klik tombol Download Gambar

Namun, jika bagian kredit "AdinJava" dihapus, maka tombol download otomatis dinonaktifkan, sebagai sistem perlindungan hak cipta.

🤝 Dukung Karya Kreator Lokal

Tool ini dibuat dan dibagikan gratis oleh AdinJava untuk membantu blogger, pelaku UMKM, desainer, dan siapa saja yang butuh watermark foto dengan mudah.

Untuk versi premium tanpa kredit atau kustomisasi, kamu bisa langsung menghubungi pembuatnya melalui:
🔗 https://adinjava.blogspot.com

📝 Selamat mencoba!
Dengan alat ini, watermark di foto kamu bisa terlihat profesional, cepat, dan aman dari klaim tanpa izin.