Kako da dodate vodeni žig na slike uz pomoć PHP i .htaccess fajla

mangup · 27. 8. 2012.

Koliko puta ste bili u situaciji da Vam neko “pozajmi” slike sa Vašeg bloga ili sajta, a niste bili u mogućnosti nikako to da sprečite? U sličnoj situaciji sam se ja našao nedavno. Što me je navelo da razmišljam kako da zaštitim slike na sajtu. Nažalost ne može mnogo da se utiče kako će neko koristiti vaše fotografije i gde, ali možemo ostaviti vodeni žig – watermark na slikama. Ako ništa drugo sa time možemo dobiti reklamu na sajtu gde se postavi vaša slika.

Koristim wordpress kao platformu za sajt, ali imam i druge sajtove koji nisu na wordpress-u, tako da sam rešenje pravio da mogu koristiti i mimo wordperss-a. To je ujedno i razlog što ovde nije reč o pluginu za wordpress nego o čistom php kodu nezavisnom od wordpress-a.

Logo

Ako već nemate logo za svoj sajt potrebno je da ga napravite.
Gledajte da bude veličine koja će se moći nalepiti na sliku. Jer ako je veći od slike neće biti nalepljen na sliku.
Logo treba da bude u png formatu.
Kreiran logo kopirajte u root vašeg sajta. U mom slučaju je to logo sa slike.

PHP code watermark.php

Sada u root sajta kreirajte fajl watermark.php i kopirajte sledeći sadržaj:


<?php
#primer
#http://www.vassajt.com/watermark.php?path=wp-content/uploads/slika.jpg

// Logo koji se nalazi u dir gde je i skripta
$logo = 'logo_96.png';
// Vreme kesiranja, u browseru korisnika, u sekundama, pozeljno 86400
$time= 86400;

$path=(isset($_REQUEST['path']))?htmlspecialchars($_REQUEST['path']):'';
if($path =='') die();

$imagesource = $_SERVER['DOCUMENT_ROOT']."/".$path;
if (!file_exists($imagesource)) die();
$filetype = strtolower(substr($imagesource,strlen($imagesource)-4,4));
switch($filetype){
case ".gif":
$image = @imagecreatefromgif($imagesource);.
$type = 'gif';
break;
case ".jpg":
$image = @imagecreatefromjpeg($imagesource);.
$type= 'jpeg';
break;
case "jpeg":
$image = @imagecreatefromjpeg($imagesource);.
$type= 'jpeg';
break;
case ".png":
$image = @imagecreatefrompng($imagesource);
$type = 'png';
break;
default:
die();
break;
}

if (empty($image)) die();

// Uporedjujemo dimenzije logo-a i slike ako je logo veci od slike necemo ga stavljati
$watermark = @imagecreatefrompng($logo);
$imagewidth = imagesx($image);
$imageheight = imagesy($image);.
$watermarkwidth = imagesx($watermark);
$watermarkheight = imagesy($watermark);
if($imagewidth>$watermarkwidth && $imageheight>$watermarkheight){
// pozicija logoa
$startx = $imagewidth-$watermarkwidth;
$starty = $imageheight-$watermarkheight;
// Kraj pozicije logoa;
imagecopy($image, $watermark, $startx, $starty, 0, 0, $watermarkwidth, $watermarkheight);
}

// dodato za kesiranje slika na client strani!
header('Pragma: public');
header('Cache-Control: max-age='.$time.'');
header('Expires: '. gmdate('D, d M Y H:i:s \G\M\T', time() + $time));
header('Content-Type: image/'.$type);
switch($type){
case 'jpeg':
imagejpeg($image);
break;
case 'png':
imagepng($image);
break;
case 'gif':
imagegif($image);
break;
}
imagedestroy($image);
imagedestroy($watermark);
?>

U liniji 6 podesite ime fajla koji ste dali vašem logo-u, a u liniji 8 koliko da traje keširanje slika u browseru klijenta. Sačuvajte fajl.

Kratko objašnjenje:

watermark.php preko $path promenjive zna na koju sliku treba da učita i nalepi logo;
od 12 do 39 linije proverava kog formata je slika (jpg, png ili gif ) i učitava je, ako slučajno nije reč o slici, završava izvršavanje;
od 40 do 53 linije učitavamo logo, gleda njegovu visinu i širinu i upoređuje sa slikom na koju treba da ga nalepi, ako je logo veći nastavlja dalje ako nije računa poziciju $startx i $starty kako bi logo bio postavljena desno-dole na fotografiji. Sa ovim pozicijama se možete igrati($startx=0 i $starty=0 postavlja logo u levo-gore);
kao rezultat generiše sliku sa watermarkom ili bez njega, šalje korisniku, sa predefinisanim headerom koji nosi podatak koliko da se kešira slika u računaru korisnika.

Sada treba proveriti kako sve to izgleda i da li radi. Otvorite u vašem browseru:
http://www.vassajt.com/watermark.php?path=/dir/url/ka/slici.jpg
gde bi original trebao da je na
http://www.vassajt.com/dir/url/ka/slici.jpg .

Rewrite url i izmene u fajlu .htaccess

Sada kada imamo funkcionalnu skriptu koja generiše sliku sa watermarkom trebalo bi svugde na sajtu gde prikazujemo slike promeniti link da se učitava preko watermark.php skripte. Pošto je to veliki posao i nije elegantno rešenje, iskoristio sam moć apache servera i moda mod_rewrite koji je verujem po defaultu uključen na serveru gde hostujete sajt, ako nije kontaktirajte hosting provajdera.
Da bi ga omogućili u .htaccess fajlu dodajte

RewriteRule ^dirsaslikama/(.*).(jpe?g|gif|png|GIF|PNG|JPE?G)$ /watermark.php?path=/dirsaslikama/$1.$2 [L]

Dole imate .htaccess file od wordpress-a koji ja koristim. Možete primetiti da sam ja fiksno odredio da samo lepi watermark na slike koje se nalaze u folderu /wp-content/uploads/ kako bi izbegao nepotrebno lepljenje watermarka na sve slike (npr. slicice koje se koriste u temama, pluginima itd .).

Isto se može uraditi i za drugi sajt koji nije na wordpress platformi, samo treba paziti na putanje.


# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^wp-content/uploads/(.*).(jpe?g|gif|png|GIF|PNG|JPE?G)$ /watermark.php?path=/wp-content/uploads/$1.$2 [L]
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Zaključak

Skripta nema definisano keširanje slika na serveru. Što može biti nedostatak koji lako može da se nadomesti. Meni nije jer koristim cloudflare uslugu koja radi keširanje i samim tim server nije opterećen stalnim generisanjem slika.
Moglo bi se dodati još opcija koja bi u zavisnosti od veličine slike učitavala ili menjala veličinu logo-a i takvog ga lepila na sliku. Opet ja za time nisam imao potrebe, lako je prilagoditi gornji kod ako nekome zatreba.
Dobra stvar ove skripte je što uopšte nedira vaše originalne fajlove. Ako želite lako možete promeniti logo na slikama tako što samo promenite logo na serveru.

Kako funkcioniše možete pogledati na mom sajtu (Recepti).

Da li na sajtu koristite slike sa drugih sajtova koje imaju vodeni žig ili strogo, ako koristite, koristite slike bez vodenog žiga?