login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > PHP

Gegevens:
Geschreven door:
 CDNC
Moeilijkheidsgraad:
 Normaal
Hits:
 10117
Punten:
Aantal punten:
  (5)
Aantal stemmen:
 4
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (14)
 

Tutorial:

Gd Library Deel 3

1. Voorwoord
2. Afbeelding als achtergrond
3. Transparant
4. Meerdere afbeeldingen
5. Watermerk
6. Slotje

1. Voorwoord
Deze tutorial is een vervolg op:
- Gd Library Deel 1
- Gd Library Deel 2
Lees deze 2 tutorials grondig door of fris de functies nog eens op. Ik ga niets herhalen, enkel nieuwe functies uitleggen, gebruiken en er voorbeelden van tonen.

top Top
2. Afbeelding als achtergond
De functie die hiervoor nodig is, hangt af van de extensie van de achtergrondafbeelding. Hieronder volgt een tabel van de functies die gebruikt kunnen worden.
Extentie Functienaam
PNG ImageCreateFromPNG();
GIF ImageCreateFromGIF();
JPG / JPEG ImageCreateFromJPEG();
BMP ImageCreateFromWBMP();

Nu ga ik over tot de praktijk:
<?php

    header('content-type: image/png');

    $img = ImageCreateFromPNG("vb-pic.png");
    
    imagepng($img);
    imagedestroy($img);

?>
Resultaat:
GD VB
Bekijk vb-pic.png
Wat we te zien kregen met GD is inderdaat net hetzelfde als de originele afbeelding.
Nou, dat was nu niet zo moeilijk, maar die witte achtergrong misstaat toch wel. Over naar hetvolgende: tranparante achtergrond!

top Top
3. Transparant
De tweede functie die ik ga uitleggen is imagecolortransparent();
Deze functie geeft de mogelijk een bepaaldekleur transparant te maken bij een afbeelding. De functie heeft 2 parameters,
- De image (Waarbij we een transparante achtergrond willen)
- De kleur (die transparant moet worden)

Mijn voorbeeld afbeelding en code:
<?php

    header('content-type: image/png');
    $img = imagecreatefrompng("vb-pic.png");
    
    $color = ImageColorAllocate($img, 255, 255, 255);
    ImageColorTransparent($img, $color);
    
    imagepng($img);
    imagedestroy($img);

?>
Resultaat:
GD VB
Wat? Zie je geen verschil? Dan gebruik je IE6! In firefox zul je zien dat het wel netjes transparant is. Als je toch een transparante achtergrond wilt hebben, die ook in IE6 werkt, zul je het tot een GIF-je moeten maken.

top Top
4. Meerdere afbeeldingen
Met het vooruitzicht een watermerk op een afbeelding te zetten, moeten we meerdere afbeelingen hebben. Hiervoor heb ik nog 2 heel mooie afbeeldingen. Niet?
- Deze
- En deze
Deze gaan we dus mengen met het aapje. Hiervoor hebben we een nieuwe functie nodig namelijk: imagecopymerge();

De functie imagecopymerge() kan 2 afbeelding mengen (=over-elkaar-plaatsen).
Eerst moeten we de afbeeldingen 'inladen'.
<?php

    header('content-type: image/png');
    
    $aap = imagecreatefrompng("vb-pic.png");
    $girafe = imagecreatefrompng("vb-pic-2.png");
    $olifant = imagecreatefrompng("vb-pic-3.png");     
    
?>
Dat was stap 1, dit gaf als resultaat niets. Maar we kunnen nu de 3 afbeeldingen wel gaan gebruiken. Ik ga de afbeelding $aap als grond-afbeeldingen nemen. Nu kunnen we de girafe ($girafe) over de afbeelding aap ($aap) zetten.
Laten we dit dan even naar code omzetten:
<?php

    header('content-type: image/png');    
    $aap = imagecreatefrompng("vb-pic.png");
    $girafe = imagecreatefrompng("vb-pic-2.png");
    $olifant = imagecreatefrompng("vb-pic-3.png");     
    
    ImageCopyMerge($aap, $girafe, 50, 0, 0, 0, 180, 302, 100);

    imagepng($aap);
    imagedestroy($aap);

?>
Resultaat:
GD VB
Ik weet het, het ziet er niet uit. Maar ik denk dat de functie toch wel wat verduidelijking kan gebruiken;
Parameter Functie
$aap Afbeelding op de achtergrond
$girafe Afbeelding op de voorgrond
50 Horizontale-Afstand van de afbeelding $girafe tov de linker zijkant
0 Verticale-Afstand van de afbeelding $girafe tov de bovenkant
0 Aantal pixels links laten vallen van de afbeelding $girafe
0 Aantal pixels bovenaan laten vallen van de afbeelding $girafe
180 Breedte van de afbeelding $girafe
302 Hoogte van de afbeelding $girafe
100 Opacity van de afbeelding $girafe, zoals in Photoshop, 100 = onderliggende afbeelding is niet zichtbaar, 0 = de afbeelding $girafe zou niet meer zichtbaar zijn
Nu is het hopelijk een beetje duidelijk wat de functie doet. Je kan nu even gaan experimenteren met de functie, wat waarden verandere enz. zodat je werkelijk ziet wat er verandert.

Nu nog even het olifantje erop zetten
<?php

    header('content-type: image/png');    
    $aap = imagecreatefrompng("vb-pic.png");
    $girafe = imagecreatefrompng("vb-pic-2.png");
    $olifant = imagecreatefrompng("vb-pic-3.png");          
    imagecopymerge($aap, $girafe, 50, 0, 0, 0, 180, 302, 70);
    
    ImageCopyMerge($aap, $olifant, 0, 25, 0, 100, 164, 200, 50);     

    imagepng($aap);
    imagedestroy($aap);

?>
Resultaat:
GD VB
Het is wel een vrij onnutig voorbeeldje, mja. Ik heb ook de transpirantie van de girafe verandert zodat het duidelijk is dat de aap er onder zit. Moest er nu geen transpirantie zien (9de parameter = 100) dan zou de olifant op de girafe liggen met de aap daar nog eens onder. Klikie.

Oefening
Als we nu de stof die we hier hebben gezien op voorbeeld 5 toepassen dan kunnen we de witte achtergronden van de olifant en girafe weg doen, zodat er nog wat meer overschiet van de aap.

Concreet wil dit zeggen:
- Geeft de girafe een transparante achtergrond
- Geeft de olifant een transparante achtergrond

Als je dit hebt gedaan kun je hier klikken om te checken of je afbeelding ermee overeen stemt, en hier vind je de source ervan.

top Top
5. Watermerk
Als je nou je site-vermelding wil hebben op de mooie aap, girafe, olifant of een eigen afbeelding kun je dat ook doen met imagecopymerge(). Maar je hebt nog 2 functies nodig. Je moet de afmetingen hebben ven de afbeelingen. Ik ga er vanuit dat je een watermerk wil zetten Rechts onder van de afbeelding.
De breedte bepaal je door de functie imagesx().
En de hoogte door de functie imagesy().

Ik ga mijn aapje watermerken met deze afbeelding.
Dan gaan we nu het in de code gooien
<?php

    header('content-type: image/png');    
    $aap = imagecreatefrompng("vb-pic.png");
    
    $watermerk = imagecreatefrompng("vb-pic-4.png");          

    imagecopymerge($aap, $watermerk, 0, 0, 0, 0, 200, 16, 100);     
    
    imagepng($aap);
    imagedestroy($aap);

?>
Dan krijgen we hetvolgende:
GD VB
Ok, het watermerk staat er, maar ik ben nog niet tevreden! Ik wil het in het rechten onderhoekje hebben. Als ik mijn watermerk daar wil krijgen zal ik eerst de afmetingen moeten hebben van de aap. Dan heb ik ook de breedte en hoogte nodig van het watermerk, het verschil ervan is het punt waar het watermerk moet komen.
<?php

    header('content-type: image/png');
        
    $aap = imagecreatefrompng("vb-pic.png");     
    $aapBreed = imagesx($aap);
    $aapHoog = imagesy($aap);
    
    $watermerk = imagecreatefrompng("vb-pic-4.png");     
    $watermerkBreed = imagesx($watermerk);
    $watermerkHoog = imagesy($watermerk);

    imagecopymerge($aap, $watermerk, ($aapBreed - $watermerkBreed), ($aapHoog - $watermerkHoog), 0, 0, 200, 16, 100);     
    
    imagepng($aap);
    imagedestroy($aap);

?>
Met als resultaat:
GD VB
Dat is nog niet wat ik wil, dat wit moet nog weg, dusja, dan maken we het watermerk transparant.
<?php

    header('content-type: image/png');
        
    $aap = imagecreatefrompng("vb-pic.png");     
    $aapBreed = imagesx($aap);
    $aapHoog = imagesy($aap);
    
    $watermerk = imagecreatefrompng("vb-pic-4.png");     
    $watermerkBreed = imagesx($watermerk);
    $watermerkHoog = imagesy($watermerk);
    
    //
    $color = ImageColorAllocate($watermerk, 255, 255, 255);
   ImageColorTransparent($watermerk, $color);
   //

    imagecopymerge($aap, $watermerk, ($aapBreed - $watermerkBreed), ($aapHoog - $watermerkHoog), 0, 0, 200, 16, 100);     
    
    imagepng($aap);
    imagedestroy($aap);

?>
GD VB
Nu heb ik wat ik wil, je kunt misschien het watermerk nog wat transparant maken als je dat wil, maar dat hoeft niet. Ik weet het mooi watermerkje maar ff snel iets gemaakt. Maar het gaat om het prencipe. Als je, als watermerk, er gewoon een tekst wil op zetten zoals ik in het voorbeeld deed, raad ik je aan gewoon om het met ImageString() te doen. Maar als je er een logo op wil ofzo of misschien sierlijke tekst dan zul je zoiets moeten doen als in het voorbeeld.
top Top

6. Slotje
Als je stemt, wil ik ook dat je een reactie achterlaat voor tips voor eventuele volgende tutorials.

Verder hoop ik dat je iets aan deze tut hebt gehad, de diertjes zijn gewoon geript van google.

Plannen voor Deel 4:
  • Cirkels
  • Verticale teksten
  • Image resize'n
  • ...


top Top

« Vorige tutorial : PDO (PHP Data Objects) Volgende tutorial : Gd Library Deel 4 »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.015s