[PHP/GD2] Transparantie en alpha channels*

[Anoniem: 126376]

Hoi,

Ik heb volgend script:
*snip* weg code
Dat geeft me een PNG-afbeelding terug, met de exacte afmetingen rond de tekst. Nu weet ik dat PNG over een uitstekend transparantiegegeven beschikt. Wat dit script nu doet, is al een stap in de goede richting. Wanneer ik als achtergrondkleur de overheersende kleur van mijn achtergrondafbeelding weergeef, is het effect wel geslaagd. Maar wanneer ik de afbeelding dan op een totaal andere kleur zet, zie je duidelijk hoe het script het heeft aangepakt.





Nu is mijn vraag, los van het feit dat Internet Explorer 6 dit formaat standaard niet ondersteunt, hoe ik die transparantie van PNG in GD ten volle kan benutten. Ik las ergens iets met alpha channels, maar daar kom ik niet uit. Zoek ik verkeerd?

[ Voor 80% gewijzigd door NMe op 26-06-2006 22:00 ]

[Bergen]

_{titel vergeten achter de tag?}

Ja, bij een 24 bits afbeelding gebruik je 3 kanalen (3 * 8 bits = 24 bits): rood, groen en blauw. Bij een 32 bits afbeelding gebruik je 4 kanalen (4 * 8 bits = 32 bits): rood, groen, blauw en alpha. Dat alpha kanaal bepaalt de mate van transparantie.

Je kunt je code trouwens beter tussen [ php ] en [ /php] zetten ipv [ code], dan krijg je syntax highlighting!

[NMe]

Ik heb je code verwijderd. Die is namelijk 0,0 relevant voor de vraag die je stelt, en daarnaast is het ook nog eens een bijna letterlijke rip van andermans script. Simpelweg daarnaar verwijzen had dus ook wel gekund.

[Anoniem: 126376]

Excuseer, maar... Een rip? Ik dacht het niet. Nergens beweer ik het ding zelf geschreven te hebben. Maar met het gegeven dat verwijzen voldoende was, ben ik het wel eens.

Ik heb me ondertussen wat verdiept in de techniciteiten rond het PNG-formaat, en nu snap ik de werking van die transparantie en alpha channels wel. Nou nog de concrete aanpak in PHP. Ik vond ook dat er functies à la ImageCollorAllocateAlpha(); bestaan, maar ik vat niet helemaal hoe ik daarmee moet omgaan. Kan iemand me op weg helpen?

[Bergen]

Anoniem: 126376 schreef op maandag 26 juni 2006 @ 22:27:
Ik vond ook dat er functies à la ImageCollorAllocateAlpha(); bestaan, maar ik vat niet helemaal hoe ik daarmee moet omgaan. Kan iemand me op weg helpen?

Wat vat je precies niet? Als je iets concreter bent kunnen mensen een gerichtere uitleg geven. Met ImageColorAllocateAlpha defenieer je een kleur inclusief de alphawaarde. Daar teken je vervolgens mee. Heb je zelf al iets geprobeerd? Schrijf zelf een stukje code en pruts er mee om. Probeer bijvoorbeeld eens een wit vlak te maken en daarop een rij rode blokjes met oplopende transparantie, zodat het dus lijkt alsof de vlakjes steeds rozer worden. Als 't niet lukt: post de code en leg uit waar je vast zit.

[edit]
Ok ik ben in een behulpzame bui. Zoiets...

PHP:

<?php
        // maak een plaatje
        $image = imageCreateTrueColor(400, 100);

        // witte achtergrond
        $white = imageColorAllocate($image, 255, 255, 255);
        imageFilledRectangle($image, 0, 0, 399, 99, $white);

        // zwart randje
        $black = imageColorAllocate($image, 0, 0, 0);
        imageRectangle($image, 0, 0, 399, 99, $black);

        // rode blokjes
        for($i = 0; $i < 20; $i++) {
                // de x-positie van 't blokje
                $x = 10 + 20 * $i;
                // de geinterpoleerde alphawaarde (0 -> 0, 19 -> 127)
                $alpha = round($i * 127 / 19);
                // maak het kleurtje
                $red = imageColorAllocateAlpha($image, 255, 0, 0, $alpha);
                // teken een blokje
                imageFilledRectangle($image, $x, 20, $x + 19, 39, $red);
        }

        // poep het plaatje uit
        header('Content-type: image/png');
        imagePNG($image);

        // en weg ermee
        imageDestroy($image);
?>

Levert dit op:

Anoniem: 126376 schreef op maandag 26 juni 2006 @ 22:27:

Ik heb me ondertussen wat verdiept in de techniciteiten rond het PNG-formaat, en nu snap ik de werking van die transparantie en alpha channels wel.

Alpha-channels zijn niet iets van de uitvinders van PNG, het is gewoon een eigenschap van een 32 bits afbeelding en het PNG-formaat ondersteunt dat toevallig.

[ Voor 84% gewijzigd door Bergen op 26-06-2006 23:03 ]

[Anoniem: 126376]

Bergen, enorm bedankt voor je behulpzaamheid. Na ettelijke uren wat met sIFR gestoeid te hebben, zag ik toch een aantal nadelen (ik heb een aangeboren aversie voor Flash... ). En ik wist al een poos van het bestaan van GD af, maar de verwoede pogingen die ik ondernam, mondden stees in prut uit. Vanmiddag dan maar eens voor de vierde keer (schat ik) me eraan gezet, en eindelijk werkt het! Ik kwam een vijftal minuutjes een oplossing tegen; op deze vind je een snippet van Jakub. Daarin wordt exact gedaan wat ik wil; morgen het beste van de A-List-Apartcode en die van Jakub mergen.

[Bergen]

Hmm tja, je kunt toch 't beste zelf iets proberen te maken, daar leer je 't meest van. Let trouwens op dat het alphakanaal van 0 tot 127 gaat, niet van 0 tot 255. Vraag me af waar ze die laatste bit dan voor gebruiken...

[ Voor 6% gewijzigd door Bergen op 26-06-2006 23:05 ]

[Anoniem: 126376]

Helemaal mee eens, vandaar dat ik het zeker niet zal nalaten ook jouw snippet te bestuderen. Nogmaals bedankt! En 0 tot en met, dat zijn toch 128 bits; klopt dan toch?

[Bergen]

Nee, een byte heeft 8 bits en daar passen 256 waarden in: 0 t/m 255. In 7 bits kunnen 128 waarden: 0 t/m 127.

1 bit = 2 waarden: 0 of 1
2 bits = 2 * 2 waarden, 4 dus
3 bits = 2 * 2 * 2 = 8
....
8 bits = 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 256.... 2^8 dus.

Een 32 bits afbeelding heeft zoals ik zei dus 4 kanalen van 8 bits elk... 4 * 8 = 32 bits. Elk kanaal kan dus 0 t/m 255 zijn. Maar blijkbaar heeft het alphakanaal dus maar 7 bits.

[edit]
Ah, gevonden. PHP gebruikt (natuurlijk) signed ints en de eerste bit is dan dus de paritybit. GD gebruikt die bit om te kijken of een kleur transparant is of niet. RGBA is in een 32 bits int eigenlijk ABGR dus heeft het alpha-kanaal nog maar 7 bits over.

[ Voor 51% gewijzigd door Bergen op 26-06-2006 23:32 ]