Kumpulan JavaScript Blogger
Script Watermark Tengah Gambar
<style>
/* Styling untuk watermark gambar */
.image-container {
position: relative;
display: inline-block;
}
/* Styling untuk gambar */
.watermarked-image {
display: block;
width: 100%;
height: auto; /* Menjaga rasio aspek gambar */
}
/* Styling untuk watermark */
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
color: rgba(255, 255, 255, 0.5); /* Warna putih dengan transparansi */
pointer-events: none; /* Pastikan watermark tidak mengganggu interaksi */
user-select: none; /* Mencegah pemilihan teks */
text-align: center;
z-index: 10; /* Pastikan watermark berada di atas gambar */
white-space: nowrap;
}
</style>
<!-- Gambar dengan Watermark -->
<div class="image-container">
<img src="your-image.jpg" alt="Deskripsi Gambar" class="watermarked-image">
<div class="watermark">Your Watermark</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('watermarked-canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('original-image');
const watermarkText = 'Your Watermark';
// Set canvas dimensions to match image
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
// Draw the image on the canvas
ctx.drawImage(image, 0, 0);
// Set watermark style
ctx.font = '48px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Calculate watermark position
const x = canvas.width / 2;
const y = canvas.height / 2;
// Draw the watermark
ctx.fillText(watermarkText, x, y);
};
});
</script>
<!-- Gambar dengan Watermark Dinamis -->
<div class="image-container">
<canvas id="watermarked-canvas"></canvas>
<img id="original-image" src="your-image.jpg" alt="Deskripsi Gambar" style="display:none;">
</div>
