Son Haberler
Anasayfa » PHP » Sayfadaki resimlere watermark ekleme

Sayfadaki resimlere watermark ekleme

resimlere-watermark-filigran-eklemeWeb geliştiricisi yada blog yazarı olarak yaptığınız web sitesi php, asp yada herhangi bir blog sayfasıda olsa içeriklerinize ekleyeceğiniz resimlerin izinsiz kullanılması, kopyalaması haksızlık ve emeğe saygısızlık olur.

Resimlerinizin açıkçası çalınmaya karşı korumak için birçok imkân vardır. Ancak resimlerinizi izinsiz olarak elde etmek; kişinin bilgi, beceri ve kabiliyetine kalmıştır. İnternette birçok web site geliştiricisi, kod yazarları onlarca satır javascript yada asp kodları yada php kodları kullanarak önlem almak için kodlar yazarlar.

Browser (tarayıcı) sağ tuş özelliklerini yada sayfa kaydetme özelliklerini devredışı bırakmak için çaba gösterirler. Resmi ele geçirmek isteyen kişi son olarak “Print Screen SysRq” (ekran görüntüsü yakalama) tuşuna basarda herhangi bir resim editör programını çalıştırıp (ctrl+v) yapıştır komutunu uyguladığında yakalamış olduğu resmi editöre yapıştırıp kaydebelir. Böylece yazılan onlarca satır yazı faydasız kalır.

Sayfadaki resimleri çalınmaya karşı korumak için alternatiflerden biri, resme filigran eklemek; Filigran (watermark) kullanarak resimlerin üzerlerine isterseniz (text) yazı olarak koruma ekleyebileceğiniz gibi isterseniz site logonuzuda enjekte edebilirsiniz.

Sloganımız; Siz resimleri yükleyin, kodlar filigran eklesin.

Şimdi sayfamıza içerik eklerken resimlere iki yolla filigran (watermark) ekleme imkânımız var. Birincisi resimlere yazı eklemek için class tanımı olarak img class=”watermark” yada resimlere logo eklemek için class tanımı img class=”watermark2″ kullanmamız yeterli olacaktır.

Gereken kodları html sayfası olarak aşağıda örnek olarak veriyorum. Siz, kullandığınız sistem wordpress yada blog ise php ve css sayfalarınızda gerekli uyarlamayı aşağıdaki örneğe göre yapın.

HTML İÇERİĞİMİZ;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resimlere Filigran Ekleme - Resimlere Watermark Ekleme</title>
<meta http-equiv="imagetoolbar" content="no" />
</head>
<body>
<div align="center">Filigran olarak Yazı eklenmiş görüntüsü<br>
  <img class="watermark" src="watermark-filigran-resim1.jpg"><br>
  Resme Watermark resim eklenen görüntüsü<br>
  <img class="watermark2" src="watermark-filigran-resim1.jpg"><br>
  </div>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.watermark.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

WATERMARK (filigran) ekleme işlemini; script.js dosyası içerisinde tanımlamamız gerekiyor.

script.js dosyasının içeriği;

$('.watermark').watermark({
  text: 'AKKAYA',  // Filingran yazısı
  textWidth: 100,
  gravity: 'ne', // Filigran yönü için nw - n - ne - w - e - sw - s - se
  opacity: 0.5,  // puslu görünüm değeri 0.7, 0.8 - 1 - 2
  margin: 7 });
$('.watermark2').watermark({
  path: 'watermark.png',  // filigran resmi
  margin: 0,
  gravity: 'ne',
  opacity: 0.5,
  outputWidth: 400});

Görüldüğü üzere watermark text kısmında enjekte edilecek yazı tanımlayabiliriz. Resme filigran görüntüsü eklemek için watermark2 kısmında path bölümünde png formatında logo tanımlamalıyız.

Aşağıdaki kodları sayfamızın </body> etiketinden önce örneğimizdeki gibi eklememiz yeterlidir.

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.watermark.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>

Resme watermark ekleme örneği sayfamızın canlı görünüm (demo) sayfası için linki tıklayınız.

Kullanılacak dosyalar için indirme linkleri;
jquery-1.11.3.min.js
jquery.watermark.js
script.js

Aslında resimlerin kopyalanmasını engellemek için gerçek çözüm, Adobe Photoshop yada benzeri bir resim editör program yardımıyla, içeriğe eklenecek resme watermark eklemek, kesin çözüm olacaktır.

Lokman AKKAYA

Konu: Sayfadaki resimlere watermark ekleme

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir