optioneel: de dynamische gradient

Ik heb zelf met PHP een script gemaakt die gradients kan maken.

Wat doet ie:
hij maakt een gradient op basis van 2 kleuren die ingevoert worden via GET.

voorbeeld:
script.php?tc=F00&bc=0F0

tc staat voor 'top color' en bc staat voor 'bottom color'.

Eerst kijkt ie of de afbeelding bestaat. Bestaat de afbeelding niet, dan maakt ie 1tje aan met de naam 'back[hexkleur1][hexkleur2].png'.

voorbeeld: backFF000000FF00.png

Deze afbeelding is 900px hoog en 1px breed. (kan je makkelijk editen in het script achter 'height' op lijn 37.

Indien het bestand bestaat wordt deze ingevoegt met 'include()' en wordt er een PNG header toegevoegd. De afbeelding wordt dus maar 1x aangemaakt in dezelfde map waar het script staat en daarna wordt ie continue ge-include-t.

Ik hoop dat het zo duidelijk is.

Veel script-plezier.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?php
function parseHex($hex) {
    if(!preg_match('/#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i', $hex, $col)) {
        preg_match('/#?([0-9a-f])([0-9a-f])([0-9a-f])/i', $hex, $col);
    }

    $hex = '#'.hexcol($col[1]).hexcol($col[2]).hexcol($col[3]);
    return $hex;
}

function
hexcol($hex) {
    if(strlen($hex)==1){
        $hex = $hex.$hex;
    }

    return $hex;
}


//type = color
//0 = array, 1 = red, 2 = green, 3 = blue.

function hex2rgb($hex,$type = 0) {
    $hex=parseHex($hex);
    if(!preg_match('/#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i', $hex, $col)) {
        preg_match('/#?([0-9a-f])([0-9a-f])([0-9a-f])/i', $hex, $col);
    }

    if($type==0) {
        return array(hexdec(hexcol($col[1])),hexdec(hexcol($col[2])),hexdec(hexcol($col[3])));
    }
else {
        return hexdec(hexcol($col[$type]));
    }
}


if(!file_exists('back'.substr(parseHex($_GET['tc']),1).substr(parseHex($_GET['bc']),1).'.png')) {

    $tc = hex2rgb($_GET['tc']);
    $bc = hex2rgb($_GET['bc']);
    
    $width = 1;
    $height = 900;

    $img = imagecreatetruecolor($width, $height);

    $y=0;
    while($y<$height) {
        $x=0;
        while($x<$width) {
            $r = intval($bc[0]*$y/$height)+intval($tc[0]*($height-$y)/$height);
            $g = intval($bc[1]*$y/$height)+intval($tc[1]*($height-$y)/$height);
            $b = intval($bc[2]*$y/$height)+intval($tc[2]*($height-$y)/$height);
            imagesetpixel($img,$x,$y,imagecolorallocate($img, $r, $g, $b));
            $x++;
        }

        $y++;
    }


    imagepng($img,'back'.substr(parseHex($_GET['tc']),1).substr(parseHex($_GET['bc']),1).'.png');
    imagedestroy($img);

}


header('Content-Type: image/png'); //png header setten

include('back'.substr(parseHex($_GET['tc']),1).substr(parseHex($_GET['bc']),1).'.png');
?>

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Introductie
  2. De HTML pagina
  3. De CSS
  4. optioneel: de dynamische gradient

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.