Gd Library Deel 4
1. Voorwoord
2. Cirkels
3. Verticale tekst
4. Eigen functies
5. Bewerkte afbeelding opslaan
6. Slotje
1. Voorwoord
Deze tutorial is een vervolg op:
- Gd Library Deel 1
- Gd Library Deel 2
- Gd Library Deel 3
Lees deze 3 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
2. Cirkels
Ik denk niet dat dit zo veel gebruikt zal worden maar het zou misschien handig kunnen zijn voor wiskundige functies,
hierbij denk ik aan sinus, cosinus en tangens.
Met deze cirkels ga ik ook nog enkele andere functies nader
verklaren.
Een gewone cirkel teken je met de functie ImageArc();.
Zoals gebruikelijk start ik met een voorbeeld code.
<?
header('content-type: image/png');
$img = imagecreate(150, 150);
$grijs = imagecolorallocate($img, 200, 200, 200);
$zwart = imagecolorallocate($img, 0, 0, 0);
ImageArc($img, 50, 100, 125, 125, 0, 0, $zwart);
imagepng($img);
imagedestroy($img);
?>
Het resultaat hiervan:
Verklaar van de functie:
| Parameter |
Functie |
$img |
Afbeedling |
50 |
x-coördinaat van het middelpunt van de cirkel |
100 |
y-coördinaat van het middelpunt van de cirkel |
125 |
Breedte cirkel [later meer] |
125 |
Hoogte cirkel [later meer] |
0 |
Deel van de cirkel verbergen tov postieve x-as, richting = wijzerszin, in graden |
0 |
Deel van de cirkel tonen tov postieve x-as, richting = wijzerszin, in graden (0 = 360 = volledige cirkel tonen) |
$zwart |
Kleur van de cirkel |
Uit parameter 4 & 5 blijkt dat je met deze functie niet alleen cirkel meer ook ovalen enz. kunt tekenen.
Ik ga enkele voorbeelden laten zien die je ook kan tekenen, enkel parameter 4 & 5 gaan veranderen.
<?
header('content-type: image/png');
$img = imagecreate(124, 124);
$grijs = imagecolorallocate($img, 200, 200, 200);
$zwart = imagecolorallocate($img, 0, 0, 0);
imagearc($img, 65, 65, [veranderlijk], [veranderlijk], 0, 0, $zwart);
imagepng($img);
imagedestroy($img);
?>
Aan de voorbeelden hiernaast denk ik dat het wel duidelijk is waarvoor deze 2 parameters dienen.
| Parameter 4 |
Parameter 5 |
Voorbeeld |
| 50 |
100 |
 |
| 100 |
100 |
 |
| 100 |
50 |
 |
Nu ga ik met parameter 6 & 7 spelen:
<?
header('content-type: image/png');
$img = imagecreate(124, 124);
$grijs = imagecolorallocate($img, 200, 200, 200);
$zwart = imagecolorallocate($img, 0, 0, 0);
imagearc($img, 65, 65, 100, 100, [veranderlijk], [veranderlijk], $zwart);
imagepng($img);
imagedestroy($img);
?>
| Parameter 6 |
Parameter 7 |
Voorbeeld |
| 90 |
0 |
 |
P7 = 0 => volledige cirkel tonen,
P6 = 90 => 90° verbergen |
| 90 |
90 |
 |
| P7 & P6 heffen elkaar op |
| 0 |
90 |
 |
P7 = 90 => 90° tonen,
P6 = 0 => 0° verbergen |
| 180 |
0 |
 |
P7 = 0 => Volledige cirkel tonen,
P6 = 180 => 180° verbergen |
| 360 |
0 |
 |
P7 = 0 => Volledige cirkel tonen,
P6 = 360 = 0 => 0° verbergen |
Je kan ook een volledig opgevulde cirkel laten tekenen. Hier hebben we de functie ImageFilledEllipse();.
Deze functie zogoed als hetzelfde als ImageArc() maar deze is altijd een volledige cirkel, en heeft dus
2 parameters minder.
Klein voorbeeldje dan maar:
<?
header('content-type: image/png');
$img = imagecreate(125, 125);
$grijs = imagecolorallocate($img, 200, 200, 200);
$zwart = imagecolorallocate($img, 0, 0, 0);
imagefilledellipse($img, 62, 62, 100, 100, $zwart);
imagepng($img);
imagedestroy($img);
?>
Dat maakt:
Maar aan de hand van cirkels wil ik ook nog een andere functies uitleggen nl:
ImageColorAllocateAlpha(),
ImageCreateTrueColor(),
ImageFill(),
ImageColorAt() en
ImageSetPixel()
ImageColorAllocateAlpha()
crieert zoals ImageColorAllocate()
een kleur binnen een afbeelding maar deze functie maakt de kleur tot een doorzichtige kleur, voorbeeldje dan maar:
<?
header('content-type: image/png');
$img = ImageCreateTrueColor(375, 200);
$bg = imagecolorallocate($img, 225, 225, 225);
$grijs = ImageFill($img, 0, 0, $bg);
$blauw = ImageColorAllocateAlpha($img, 0, 64, 128, 75);
$oranje= ImageColorAllocateAlpha($img, 255, 128, 64, 50);
$paars = ImageColorAllocateAlpha($img, 128, 0, 125, 0);
$groen = ImageColorAllocateAlpha($img, 0, 128, 128, 100);
$rood = ImageColorAllocateAlpha($img, 128, 0, 0, 50);
$wit = ImageColorAllocateAlpha($img, 255, 255, 255, 50);
$zwart = ImageColorAllocateAlpha($img, 0, 0, 0, 125);
ImageFilledEllipse($img, 75, 75, 100, 100, $blauw);
ImageFilledEllipse($img, 150, 100, 100, 100, $oranje);
ImageFilledEllipse($img, 225, 125, 100, 100, $paars);
ImageFilledEllipse($img, 300, 115, 100, 100, $groen);
ImageFilledEllipse($img, 115, 50, 100, 100, $rood);
ImageFilledEllipse($img, 250, 75, 100, 100, $wit);
ImageFilledEllipse($img, 325, 75, 100, 100, $zwart);
imagepng($img);
imagedestroy($img);
?>
Resultaat:
| Functie naam |
Uitleg |
ImageCreateTrueColor() |
Maakt een nieuwe lege afbeelding,
Parm1: x-afmeting
Parm2: y-afmeting
|
ImageFill() |
Kleur de achtergrond van de afbeelding,
Parm1: afbeelding
Parm2: x-start
Parm3: y-start
Parm4: kleur
|
ImageColorAllocateAlpha() |
Maakt een doorzichtige kleur aan,
Parm1: afbeelding
Parm2: r-waarde
Parm3: g-waarde
Parm4: b-waarde
Parm5: opacity (waarde tussen 0 en 127, waarbij 0 niets doorzichtig is, en 127 het volledige onderliggende kleur zichtbaar is)
|
Nu nog 2 andere functies te gebruiken:
ImageColorAt() en
ImageSetPixel()
| Functie naam |
Uitleg |
ImageColorAt() |
Returnt de kleur van een bepaalde pixel,
Parm1: afbeelding
Parm2: x-coördinaat van het punt
Parm3: y-coördinaat van het punt
|
ImageSetPixel() |
Kleurt 1 pixel naar de opgevens RGB-waarde
Parm1: afbeelding
Parm2: x-coördinaat van het punt
Parm3: y-coördinaat van het punt
Parm4: kleur
|
Voor deze 2 functies ga ik geen voorbeeld geven, want deze worden gebruikt bij: Zwart/wit (grijstinten) en Negatief, mij lijkt het vrij duidelijk wat deze functies doen.
Top
3. Verticale tekst
Hiervoor is er een functie, maar deze kan enkel 1 lettertje zetten, de functie is: ImageCharUp()
Voorbeeldje:
<?
$im = imagecreate(20, 40);
$string = 'Hij zal enkel de eerst erop zetten';
$bg = imagecolorallocate($im, 225, 225, 225);
$zwart = imagecolorallocate($im, 0, 0, 0);
ImageCharUp($im, 3, 1, 20, $string, $zwart);
header('Content-type: image/png');
imagepng($im);
?>
Resultaat:
Enkel de 'H' van 'hij' staat er, dus als we meerde dingen erop willen zetten, ga we zelf iets moeten verzinnen.
Eerste zullen we dus de string moeten opsplitsen tot een array waarbij enkele key 1 letterje van de string bevat,
deze array kunnen we dan weer uitlezen en de lettertje per letterje op de afbeelding plaatsen.
Ik maak heb je nu even heel gemakkelijk:
<?
$im = imagecreate(20, 300);
$string = 'Hij zal enkel de eerst erop zetten';
$bg = imagecolorallocate($im, 225, 225, 225);
$zwart = imagecolorallocate($im, 0, 0, 0);
VerticaleText($im, 3, 1, 20, $string, $zwart, true);
header('Content-type: image/png');
imagepng($im);
// nu dan de functie
function VerticaleText($img, $size, $pos_x, $pos_y, $text, $color, $start = true)
{
$tekes = array();
$aantal = strlen($text);
// spilts de sting op
for($i=0; $i<$aantal; $i++)
{
$tekes[] = substr($text, $i, 1);
}
function afmSize($size)
{
$x = array(1 => 5,6,7,8,9);
$y = array(1 => 6,8,9,10,10);
return array('x' => $x[$size], 'y' => $y[$size]);
}
$lSize = afmSize($size);
// ff een luxe functe erbij, als $start == true dan is de Y-coordinaat ($pos_y) het eindpunt van de sting op de afbeelding,
// als $start == false dan is de Y-coordinaat ($pos_y) het beginpunt van de sting op de afbeelding,
$start = ($start == true) ? $aantal * $lSize['x'] + $pos_y : $pos_y ;
// loop de array af, en zet ze op de afbeelding
foreach($tekes as $k => $v)
{
ImageCharUp($img, $size, $pos_x, $start - $k * $lSize['x'], $v, $color);
}
}
?>
Dat is dus de functie: en als we dit uitvoeren krijgen we als resultaat:
Top
4. Eigen functies
Bij het vorige stukje hebben we ook al een eigen fucntie gebazeert op een originele functie.
Nu gaan we dus enkele kleine functies maken.
Top
4. Eigen functies » 1. Zwart/wit (grijstinten)
Hier gaan we dus pixel per pixel moeten herleiden naar een grijstint, de breedte van de afbeedling
kunnen we vinden door de functie Imagesx(),
En de hoogte door de functie Imagesy(),
Om dus alle pixels af te lopen hebben we dus 2 for-loops nodig.
<?
function imgGrijs($img)
{
for($i=1; $i<imagesx($img); $i++)
{
for($j=1; $j<imagesy($img); $j++)
{
//
}
}
}
?>
voor de grijstint te bepalen (grijstint: De r-waarde = g-waarde = b-waarde).
Maar eerst moeten we de RGB-waarde van die ene pixel hebben, dit doen we met de functie ImageColorAt()
als we die hebben neemen we het gemiddelde van de R, de G en de B waar en we kleuren de nieuwe pixel met de functie ImageSetPixel()
<?
function imgGrijs($img)
{
for($i=1; $i<imagesx($img); $i++)
{
for($j=1; $j<imagesy($img); $j++)
{
// kleur zoeken
$rgb = ImageColorAt($img, $i, $j);
// elke waarde appart
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
// gemiddelde
$n = ($r + $g + $b)/3;
// nieuwe kleur maken
$color = imagecolorallocate($img, $n, $n, $n);
// de pixel de nieuwe kleur geven
imagesetpixel($img, $i, $j, $color);
}
}
}
?>
Ken je ons aapje nog van de vorige tutorial? Hier is hij, we gaan hem in grijstinten zetten
om te tonen dat mijn functie wel degelijk werkt.
Dat lijkt mij goed omgezet naar grijstinten
Top
4. Eigen functies » 2. Negatief
Hier hebben we dezelfde 2 functies nodig als in het vorige, nl:
ImageColorAt() en
ImageSetPixel().
Ook hier moeten we weer pixel per pixel bekijken, dus:
<?
function imgNegatief($img)
{
for($i=1; $i<imagesx($img); $i++)
{
for($j=1; $j<imagesy($img); $j++)
{
// kleur zoeken
$rgb = ImageColorAt($img, $i, $j);
// elke waarde appart
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
//
}
}
}
?>
Het negatief, is het tegenovergestelde van de huidige kleur,
het tegengestelde van zwart is wit,
RGB-waarde van zwart: 0, 0, 0
RGB-waarde van wit: 255, 255, 255
Hun som is 255.
De tegenovergestelde kleur van die gebruikt is in de afbeelding is dus 255 - [waarde].
in code vorm wordt het:
<?
function imgNegatief($im)
{
for($i=1; $i<imagesx($im); $i++)
{
for($j=1; $j<imagesy($im); $j++)
{
// kleur zoeken
$rgb = ImageColorAt($im, $i, $j);
// elk apart
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
// kleur
$color = imagecolorallocate($im, 255-$r, 255-$g, 255-$b);
// inkleuren
imagesetpixel($im, $i, $j, $color);
}
}
}
?>
Om het te bewijzen grijp ik weer naar mijn aapje:
Top
4. Eigen functies » 3. Imageresize'ing
Nu zijn we bij de, denk ik, meetste nuttige functie. Het resizen van images!
Ik ga dus op zoek naar een functie, die, als de afbeeldings te groot is, deze gaat verkleinen.
Zowel de breedte, als de hoogte!.
Ik ga dus beginnen met een functie te maken met 3 parameters, de afbeelding, de maximum breedte
en de maximum hoogte
<?
function imgResize($im, $max_x, $max_y)
{
}
?>
Om al mee te weten of we moeten gaan verkleinen, gaan we de afmetingen van de afbeelding vergelijken
met de maximum afmetingen.
En met het oog, indien nodig te verkleinen, ga ik de verhouding bereken van de maximums met de afmetingen
van de afbeelding.
<?
function imgResize($im, $max_x, $max_y)
{
// bekijk verhoudingen
$x_verhouding = imagesx($im) / $max_x;
$y_verhouding = imagesy($im) / $max_y;
}
?>
Al de verhouding meer dan 1 is, is de afbeelding te groot en moet ze verkleint worden. Maar als de breedte en
de hoogte het maximum overschrijden, moeten ze bijna aangepakt worden. Voor het vermijden van dubbelchecks
ga ik kijken welk, breedte of hoofte, de grootste verhouding heeft. Met deze verhouden werken we dan verder. Dan
kan de andere afmeting niet meer te groot zijn.
<?
function imgResize($im, $max_x, $max_y)
{
// bekijk verhoudingen
$x_verhouding = imagesx($im) / $max_x;
$y_verhouding = imagesy($im) / $max_y;
// moeten we gaan resiz'en?
if($x_verhouding > 1 || $y_verhouding > 1)
{
// als verder gaan op de grootste verhouding, wete we zeker dat de andere maat ook ok is!
if($x_verhouding > $y_verhouding)
{
}
}
}
?>
Als de $x_verhouding het grootste is, word de nieuwe breedte, de
maximum opgegeven breedte ($max_x). De nieuwe hoogte moet dezelfde
verhouding hebben als de nieuwe breedte, dus delen we oude hoogte door de verhouding van de breedte.
Als de $y_verhouding het grootste is, doen we net hetzelfde
maar omgekeert, x word y en y word x.
<?
function imgResize($im, $max_x, $max_y)
{
// bekijk verhoudingen
$x_verhouding = imagesx($im) / $max_x;
$y_verhouding = imagesy($im) / $max_y;
// moeten we gaan resiz'en?
if($x_verhouding > 1 || $y_verhouding > 1)
{
// als verder gaan op de grootste verhouding, wete we zeker dat de andere maat ook ok is!
if($x_verhouding > $y_verhouding)
{
// voor de afbeedling zo groot mogelijk te houde
$nx = $max_x;
// we verkleinen zodat de verhouding blijft!
$ny = imagesy($im) / $x_verhouding;
}
else
{
$ny = $max_y;
$nx = imagesx($im) / $y_verhouding;
}
}
}
?>
We hebben nu alles wat we moeten hebben voor het maken van de nieuwe afbeelding. Dus maken we een nieuwe afbeelding
$nIm, met de breedte $nx
en de hoogte $ny. We geven het een witte achtergrond (blijft toch niets
van over). En dan zetten we er de ouder afbeelding op met de nieuwe breedte en hoogte.
Dan nog enkel de return van de functie, want we gaan de afbeelding niet aan maken binnen de functie. Dan kan er nog alles
gedaan worden met de nieuwe afbeelding, zoals watermerken enz.
<?
function imgResize($im, $max_x, $max_y)
{
// bekijk verhoudingen
$x_verhouding = imagesx($im) / $max_x;
$y_verhouding = imagesy($im) / $max_y;
if($x_verhouding > 1 || $y_verhouding > 1)
{
// als verder gaan op de grootste verhouding, wete we zeker dat de andere maat ook ok is!
if($x_verhouding > $y_verhouding)
{
// voor de afbeedling zo groot mogelijk te houde
$nx = $max_x;
// we verkleinen zodat de verhouding blijft!
$ny = imagesy($im) / $x_verhouding;
}
else
{
$ny = $max_y;
$nx = imagesx($im) / $y_verhouding;
}
$nIm = imagecreatetruecolor($nx, $ny);
imagefill($nIm,0,0,imagecolorallocate($nIm,0,0,0));
imagecopyresampled($nIm, $im, 0, 0, 0, 0, $nx, $ny, imagesx($im), imagesy($im));
$im = $nIm;
}
return $im;
}
?>
Nu we onze functie hebben, wat dacht je van ons aapje verkleinen?
<?
$aap = imagecreatefrompng('vb-pic.png');
$img = imgResize($aap,100,100);
imagepng($img);
imagedestroy($img);
?>
Resultaat:
Het blijkt dat ons aapje breder was dandat hij hoog is, zijn breedte is dan ook 100 pixels!
Top
5. Bewerkte afbeeldingen opslaan
Na het verkleinen of watermerken of het weet ik veel-len van een afbeelding is het misschien leuk deze ook
werkelijk op te slaan zodat php niet telkens opnieuw de afbeelding moet genereren. Dit doen we met de functie
imagePNG() indien het .PNG
moet zijn, anders kan het ook zijn: imageGIF() en imageJPEG().
Deze functies hebben 2 optionele parameters, de naam waaronder het moet worden opgeslagen, en de kwaliteit ervan.
We hebben nu ons aapje klein gemaakt, nu gaan we hem opslaan onder de naam 'aap_klein.png'.
<?
$aap = imagecreatefrompng('../gd3/vb-pic.png');
$img = imgResize($aap,100,100);
imagepng($img, 'aap_klein.png');
imagedestroy($img);
?>
Nu zal 'aap_klein.png' de verkleinde versie zijn die ook effectief opgeslagen is. Je kan ook een derde
parameter meegeven, de qualiteit van de afbeelding. Maar die hoeft ook niet.
Opmerking: Als de afbeelding al bestaat zal hij wel een error generen.
Top
6. Slotje
Als je stemt, wil ik ook dat je een reactie achterlaat voor tips voor eventuele volgende tutorials.
Als je wil:
- Download hier alle bestanden die ik gebruikt heb
- Download hier een class met alle functies uit deze tutorial (uitleg staat onderaan)
Top
|
(4.88) 