GD - Png transparantie
Ik probeer via GD een leuke analoge klok in elkaar te zetten. Ik gebruik het volgende script:
Code (php)
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
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
<?php
// Zorgen dat de browser hem als afbeelding leest
header('Content-type: image/png');
// Nederlandse datum berekenen
// Achtergrondafbeelding kiezen
$im = @imagecreatefrompng('clock.png');
// Kleuren toewijzen
$white = imagecolorallocate($im, 255, 255, 255);
// Teksten toewijzen
$H = date('H');
$i = date('i');
$text3 = ".....";
$text4 = "...";
// minutenwijzer (gradenhoek berekenen)
$graden = $i * (5/3) * 0.01 * 360 - 90;
$graden = $graden - $graden - $graden;
// urenwijzer (gradenhoek berekenen)
$graden2 = $H * (25/3) * 0.01 * 360 - 90;
$graden2 = $graden2 - $graden2 - $graden2;
// Urenwijzer ook minuutgevoelig maken.
$aanpassing = $graden / 12;
$graden2 = $graden2 + $aanpassing;
// Lettertype (moet in dezelfde map staan, anders werkt het niet)
$font = 'arial.ttf';
// Wijzers en teksten tekenen
imagettftext($im, 20, $graden, 51, 60, $white, $font, $text3);
imagettftext($im, 20, $graden2, 51, 60, $white, $font, $text4);
// Het aanmaken en verwijderen van de afbeelding
imagepng($im);
imagedestroy($im);
?>
// Zorgen dat de browser hem als afbeelding leest
header('Content-type: image/png');
// Nederlandse datum berekenen
// Achtergrondafbeelding kiezen
$im = @imagecreatefrompng('clock.png');
// Kleuren toewijzen
$white = imagecolorallocate($im, 255, 255, 255);
// Teksten toewijzen
$H = date('H');
$i = date('i');
$text3 = ".....";
$text4 = "...";
// minutenwijzer (gradenhoek berekenen)
$graden = $i * (5/3) * 0.01 * 360 - 90;
$graden = $graden - $graden - $graden;
// urenwijzer (gradenhoek berekenen)
$graden2 = $H * (25/3) * 0.01 * 360 - 90;
$graden2 = $graden2 - $graden2 - $graden2;
// Urenwijzer ook minuutgevoelig maken.
$aanpassing = $graden / 12;
$graden2 = $graden2 + $aanpassing;
// Lettertype (moet in dezelfde map staan, anders werkt het niet)
$font = 'arial.ttf';
// Wijzers en teksten tekenen
imagettftext($im, 20, $graden, 51, 60, $white, $font, $text3);
imagettftext($im, 20, $graden2, 51, 60, $white, $font, $text4);
// Het aanmaken en verwijderen van de afbeelding
imagepng($im);
imagedestroy($im);
?>
Afkomstig uit de scriptlib van deze website. Nu heb ik mijn eigen draai er aan proberen te geven. Desalniettemin had ik een PNG achtergrondje nodig. Nu is het zo dat de achtergrond nadat de klok er in is gezet niet langer transparant is. Er zit een rare halve gradient achter door. Ik heb zelf niet genoeg kennis van GD om te snappen waar dat vak vandaan komt, maar jullie vast wel? (Voorbeeld)
Overigens, als ik een gif gebruik, doet 'ie het wel! Alleen is nu het plaatje niet zo heel mooi. De randen zijn een beetje afgehakt en niet meer mooi rond.
Alvast bedankt,
Jezpur
GD produceert jammer genoeg niet zulke goede kwaliteit, je krijgt heel vaak van dat rafelige gedoe. Je kunt beter imagemagick gebruiken, maar die is dus wat zwaarder en niet overal geïnstalleerd.
Het werkt perfect, zelfs de randjes zijn helemaal goed.
Zo heb ik het toegepast:
Code (php)
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
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
<?php
// Zorgen dat de browser hem als afbeelding leest
header('Content-type: image/png');
// Nederlandse datum berekenen
// Achtergrondafbeelding kiezen
$im = imagecreatetruecolor(97,121);
imagealphablending($im,false);
$col=imagecolorallocatealpha($im,255,255,255,127);
imagefilledrectangle($im,0,0,97,121,$col);
imagealphablending($im,true);
$png = @imagecreatefrompng('images/clock.png');
imagecopy($im, $png, 0, 0, 0, 0, 102, 121);
// Kleuren toewijzen
$white = imagecolorallocate($im, 255, 255, 255);
// Teksten toewijzen
$H = date('H');
$i = date('i');
$text3 = ".....";
$text4 = "...";
// minutenwijzer (gradenhoek berekenen)
$graden = $i * (5/3) * 0.01 * 360 - 90;
$graden = $graden - $graden - $graden;
// urenwijzer (gradenhoek berekenen)
$graden2 = $H * (25/3) * 0.01 * 360 - 90;
$graden2 = $graden2 - $graden2 - $graden2;
// Urenwijzer ook minuutgevoelig maken.
$aanpassing = $graden / 12;
$graden2 = $graden2 + $aanpassing;
// Lettertype (moet in dezelfde map staan, anders werkt het niet)
$font = 'arial.ttf';
// Wijzers en teksten tekenen
imagettftext($im, 20, $graden, 51, 60, $white, $font, $text3);
imagettftext($im, 20, $graden2, 51, 60, $white, $font, $text4);
// Het aanmaken en verwijderen van de afbeelding
imagealphablending($im,false);
imagesavealpha($im,true);
imagepng($im);
imagedestroy($im);
?>
// Zorgen dat de browser hem als afbeelding leest
header('Content-type: image/png');
// Nederlandse datum berekenen
// Achtergrondafbeelding kiezen
$im = imagecreatetruecolor(97,121);
imagealphablending($im,false);
$col=imagecolorallocatealpha($im,255,255,255,127);
imagefilledrectangle($im,0,0,97,121,$col);
imagealphablending($im,true);
$png = @imagecreatefrompng('images/clock.png');
imagecopy($im, $png, 0, 0, 0, 0, 102, 121);
// Kleuren toewijzen
$white = imagecolorallocate($im, 255, 255, 255);
// Teksten toewijzen
$H = date('H');
$i = date('i');
$text3 = ".....";
$text4 = "...";
// minutenwijzer (gradenhoek berekenen)
$graden = $i * (5/3) * 0.01 * 360 - 90;
$graden = $graden - $graden - $graden;
// urenwijzer (gradenhoek berekenen)
$graden2 = $H * (25/3) * 0.01 * 360 - 90;
$graden2 = $graden2 - $graden2 - $graden2;
// Urenwijzer ook minuutgevoelig maken.
$aanpassing = $graden / 12;
$graden2 = $graden2 + $aanpassing;
// Lettertype (moet in dezelfde map staan, anders werkt het niet)
$font = 'arial.ttf';
// Wijzers en teksten tekenen
imagettftext($im, 20, $graden, 51, 60, $white, $font, $text3);
imagettftext($im, 20, $graden2, 51, 60, $white, $font, $text4);
// Het aanmaken en verwijderen van de afbeelding
imagealphablending($im,false);
imagesavealpha($im,true);
imagepng($im);
imagedestroy($im);
?>
Eerst zag ik alleen nog maar wijzers, waarop ik slim dacht te zijn en de achtergrond er later in te zetten via imagecopy(), en dat werkt! Bedankt Karl :).
Edit: Toch nog een klein probleempje. Er zit nog een zwarte rand die ik niet weg krijg...
Edit: Gefixed, het gemaakte plaatje was 5px breder dan de achtergrond...
Gewijzigd op 01/01/1970 01:00:00 door Jesper Diovo