Gerond

Demo geronde hoeken			PHP source code
Origineel			<?php /* Create an image with rounded borders and send it to browser. The new image will be larger than the original image. Input parameters: src: the URL of the original image border-width: size of the border in pixels, default 1 border-color: 6 bytes hexadecimal colour code, default 0000FF for blue transparent-color: background colour for far corners, outside rounded borders, default FFFFFF for white Online demo at: http://www.sum-it.nl/en200521.html Written by SUMit, Henk Jan Nootenboom, 26 July 2005 http://www.sum-it.nl/enhjnoot.html */ $sSourceImageUrl = $_REQUEST["src"]; $nBorderSize = $_REQUEST["border-width"]; $sBorderColour = $_REQUEST["border-color"]; $sTransparentColour = $_REQUEST["transparent-color"]; // set default values $nBorderSize = max($nBorderSize, 1); // default 1 if (!$sBorderColour) { $sBorderColour = "0000FF"; // default blue } if (!$sTransparentColour) { $sTransparentColour = "FFFFFF"; // default white } // split colours into red, green and blue $nBorderRed = hexdec(substr($sBorderColour, 0, 2)); $nBorderGreen = hexdec(substr($sBorderColour, 2, 2)); $nBorderBlue = hexdec(substr($sBorderColour, 4, 2)); $nTransparentRed = hexdec(substr($sTransparentColour, 0, 2)); $nTransparentGreen = hexdec(substr($sTransparentColour, 2, 2)); $nTransparentBlue = hexdec(substr($sTransparentColour, 4, 2)); // read source image $aFileNameParts = explode(".", $sSourceImageUrl); $sFileExtension = strtolower(end($aFileNameParts)); // part behind last dot if ($sFileExtension == "jpg" \|\| $sFileExtension == "jpeg") { $oSourceImage = imageCreateFromJpeg($sSourceImageUrl); } else if ($sFileExtension == "gif") { $oSourceImage = imageCreateFromGif($sSourceImageUrl); } else if ($sFileExtension == "png") { $oSourceImage = imageCreateFromPng($sSourceImageUrl); } else { die("Unknown image type: $sFileExtension"); } $nSourceWidth = imagesx($oSourceImage); $nSourceHeight = imagesy($oSourceImage); // Create destination image $nDestinationWidth = $nSourceWidth + $nBorderSize + $nBorderSize; $nDestinationHeight = $nSourceHeight + $nBorderSize + $nBorderSize; $oDestinationImage = imageCreate($nDestinationWidth, $nDestinationHeight); $nTransparentColour = imageColorAllocate( $oDestinationImage, $nTransparentRed, $nTransparentGreen, $nTransparentBlue); $nBorderColourIndex = imageColorAllocate( $oDestinationImage, $nBorderRed, $nBorderGreen, $nBorderBlue); // copy source image to center of destination image, inside borders to be imagecopy ( $oDestinationImage, $oSourceImage, $nBorderSize, $nBorderSize, 0, 0, $nSourceWidth, $nSourceHeight); imageColorTransparent($oDestinationImage, $nTransparentColour); // draw borders, start with top left // each corner is a pie-quarter, moved 1 pixel to the center of the image // for a rounded inside corner of the border $nArcWidth = $nBorderSize + $nBorderSize; imageFilledArc( $oDestinationImage, $nBorderSize, $nBorderSize, $nArcWidth,$nArcWidth, 180,270, $nBorderColourIndex, IMG_ARC_PIE); // top border imageFilledRectangle( $oDestinationImage, $nBorderSize, 0, $nDestinationWidth - $nBorderSize,$nBorderSize-1, $nBorderColourIndex); // top right border imageFilledArc( $oDestinationImage, $nDestinationWidth - $nBorderSize-1, $nBorderSize, $nArcWidth,$nArcWidth, 270,360, $nBorderColourIndex, IMG_ARC_PIE); // right border imageFilledRectangle( $oDestinationImage, $nDestinationWidth - $nBorderSize, $nBorderSize, $nDestinationWidth, $nDestinationHeight - $nBorderSize, $nBorderColourIndex); // right bottom border imageFilledArc( $oDestinationImage, $nDestinationWidth - $nBorderSize -1, $nDestinationHeight - $nBorderSize -1, $nArcWidth,$nArcWidth, 0,90, $nBorderColourIndex, IMG_ARC_PIE); // bottom border imageFilledRectangle( $oDestinationImage, $nBorderSize, $nDestinationHeight - $nBorderSize, $nDestinationWidth - $nBorderSize, $nDestinationHeight , $nBorderColourIndex); // left bottom border imageFilledArc( $oDestinationImage, $nBorderSize, $nDestinationHeight - $nBorderSize -1, $nArcWidth,$nArcWidth, 90,180, $nBorderColourIndex, IMG_ARC_PIE); // left border imageFilledRectangle( $oDestinationImage, 0, $nBorderSize, $nBorderSize - 1, $nDestinationHeight - $nBorderSize, $nBorderColourIndex); header('Cache-Control: max-age=2592000'); // cache for 30 days header("Content-type: image/png"); imagePNG($oDestinationImage); // output to browser. ?>
Kleur		Borderdikte
Origineel	Versie met geronde border

Hoe krijg je makkelijk een plaatje met een geronde border? Die vraag is actueel door het redesign van de SUMit website.

Plaatjes op de SUMit homepage komen terug op vervolgbladzijden, zoals voor het on-line rooster programma.

Sara Borremans heeft een fraai ontwerp gemaakt, met allerlei ronde hoekjes. Tot zover alles OK, maar die ronde hoekjes vertalen naar techniek verloopt stroef.

De meeste ronde hoekjes lukken wel met een border-radius van CSS.
Helaas, de meest gangbare browsers ondersteunen border-radius alleen met een workaround.
Geronde borders rond plaatjes lukt lekker in Firefox.
Voor minder geavanceerde browsers werkt een geronde DIV rond een plaatje wel, maar dat is in Firefox weer niet fraai.

Grr, wat een ramp die rondingen met CSS in verschillende browsers. Ik draai nog dol van plaatjes met ronde hoeken.

De met CSS geronde plaatjes gaan hier een jaar of wat het vat in. Zodra de browsers meer op 1 lijn zitten, wordt het tijd voor een herkansing.

Wat nu?

De ronde hoeken vergeten? Hmm, dan verstoort het hele ontwerp.
Van ellende maar zelf in de plaatjes ronde hoekjes met een tekenprogramma maken? Nee, dat betekent dubbel onderhoud.

De minst slechte oplossing lijkt me nog om de computer een border te laten tekenen. Als dat niet lekker op de client met CSS kan, dan maar aan de webserverkant met PHP.

Voorbeeld


Een kaal plaatje, zonder border.	Hetzelfde plaatje met een groene border op een lichtgrijze achtergrond.	Hetzelfde plaatje met een paarse border op een groene achtergrond.

Plussen en minnen

Het werkt op alle browsers, omzeilt mooi alle CSS interpretatie verschillen.
Alle kleuren en borderdiktes zijn mogelijk.
Vraagt een ingewikkelde image URL zoals http://www.sum-it.nl/img/rounded_image.php?border-width=6&src=http://www.sum-it.nl/smiley.gif
Het geeft later dubbel onderhoud om alles alsnog in CSS te krijgen.

Kotom, het werkt wel, maar het blijft een suboptimale, tijdelijke oplossing. Gerond, maar nog niet afgerond.

Tot de volgende noot,
Henk Jan Nootenboom