3min

Tags in dit artikel

,

Afwerking

De afwerking met een zwart randje


Het afwerken van een thumbnail hoeft niet altijd via PHP te gebeuren, maar is in dit geval enkel om het principe te weergeven. De afwerking die ik heb gekozen is een zwarte rand om het plaatje heen.

Een zwart randje om een plaatje is niets anders dan een rechthoek om de afbeelding heen te tekenen. In PHP is daar de functie imagerectangle voor. Deze functie tekent een rechthoek, of vierkant indien je de zijdes gelijkt maakt. Het gebruiken van de functie gaat als volgt:

PHP Code
1
bool imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $color )

Deze functie tekent enkel de randen van de rechthoek. Om een gevulde rechthoek te maken moet je imagefilledrectangle gebruiken. Het gebruik van parameters is hetzelfde, er wordt enkel anders mee omgegaan. In dit geval gebruik ik imagerectangle omdat er geen opvulling moet komen, deze is immers gemaakt bij het verkleinen.

De parameters van beide functies zijn:
  • resource $image
    Het plaatje (object) waar de rectangle in moet komen te staan
  • int $x1
    Het begincoördinaat (X-waarde). Dit is de linker bovenhoek van de rechthoek.
  • int $y1
    Het begincoördinaat (Y-waarde)
  • int $x2
    Het ‘eind’coördinaat (X-waarde). Dit is de rechter onderhoek van de rechthoek.
  • int $y2
    De ‘eind’coördinaat (Y-waarde).
  • int $color
    De kleur van de rechthoek

Het invullen


Bij het afbeeldingsobject wordt uiteraard $Thumbnail ingevuld. Dit is immers het plaatje waar naar geschreven moet worden. $x1 en $y1 zijn beide 0, dat komt omdat linksboven moet worden begonnen. De coordinaten van dat punt zijn 0,0.

Bij $x2 en $y2 moet het coördinaat van de rechter onderhoek worden opgegeven. Omdat de rand de hele thumbnail bestrijkt is dit natuurlijk de breedte (voor x2), en de hoogte (voor y2).

Dit is bijna helemaal waar; er moet nog wel 1 pixel vanaf worden gehaald. Dit is omdat er links al een rand is getekend. Dit betekent dat de breedte van deze rechthoek 1 kleiner is, vandaar beide worden verlaagd met 1.

De kleur

Bij $color moet een kleur worden opgegeven. Helaas gaat dit niet zo makkelijk als in HTML of CSS door een HEX-code (#FF9900) op te geven. In PHP wordt gebruikt gemaakt imagecolorallocate. Deze functie gebruik je als volgt:

PHP Code
1
int imagecolorallocate  ( resource $image  , int $red  , int $green  , int $blue  )

Als eerste wordt het afbeeldingsobject opgegeven waar deze kleur beschikbaar voor moet zijn. Vervolgens wordt een intensiteit van rood, groen en blauw opgegeven. 0 is minimum, 255 is het maximum.

Belangrijk bij het gebruik van deze functie is dat in vroegere PHP-edities en/of bepaalde omstandigheden de eerst gedefineerde kleur de achtergrondkleur wordt. Het is daarom altijd verstandig om eerst een achtergrond kleur aan te maken, het plaatje compleet op te vullen en vervolgens andere kleuren te definieren.

In de voorbeeldcode hieronder, het aanmaken van de kleruen), wordt ook eerst een witte achtergrondkleur aangemaakt. Het plaatje wordt compleet gevuld (imagefilledrectangle) waarna vervolgens een zwarte randkleur wordt aangemaakt. Het bepalen van de rood, groen en blauw codes kan bijvoorbeeld met Photoshop of Paint.

Hieronder de voorbeeldcode voor het aanmaken van de kleuren. Deze heb ik meteen na imagecreatetruecolor() gezet.
PHP Code
1
2
3
4
5
6
7
8
9
10
11
12
<?php
// Maken 2 kleuren aan. De eerste kleur is (altijd) de achtergrond kleur. Die wordt later toch overschreven.
// De tweede is de kleur van de rand. De kleur code is rood, groen, blauw.
$bgc = imagecolorallocate($Thumbnail, 255, 255, 255);
 
// Vul de achtergrond op.
//
imagefilledrectangle($Thumbnail, 0,0, $Thumbnail_breedte, $Thumbnail_hoogte, $bgc);
 
$rand_kleur = imagecolorallocate($Thumbnail, 0,0,0);
?>
 

Vervolgens het maken van de rand. Deze code komt na het kopieren van de thumbnail te stan (imagecopyresized/imagecopyresampled).
PHP Code
1
2
3
4
<?php
// Een zwart randje om het plaatje zetten.
imagerectangle($Thumbnail, 0, 0, $Thumbnail_breedte-1, $Thumbnail_hoogte-1, $rand_kleur);
?>

Table of contents