Monesti sitä haluaisi sivuillensa hieman muutosta siihen tyypilliseen laatikkomaisuuteen esimerkiksi pyöreiden muotojen avulla. Seuraava skripti pyöristää kuvan terävät kulmat ja lisää 1px vahvuisen reunan. Yhdistämällä tämän esimerkiksi omaan thumbnail-skriptiin saat sivuillesi hienon gallerian. Skriptin voi nähdä toiminnassa osoitteessa http://www.jossu.com/test/rounded_pics.php?sade=50&vari=cc6600. Mitä suurempi on säde, sitä pyöreämmät ovat kulmat. Sädettä tarpeeksi muuttamalla voit nähdä aika erikoisen kuvan :) Jos skriptille antaa parametriksi värin heksamuodossa ilman risuaitaa, muodostaa skripti jpg-kuvan, jonka kulmat ovat annetun värin väriset. Muussa tapauksessa tehdään png-kuva, jonka kulmat ovat läpinäkyvät.
<?php // kuvaheader, jos väri annettu parametrina, tehdään jpg. muuten png if(isset($_GET['vari'])) header("Content-type: image/jpg"); else header("Content-type: image/png"); $jpg = false; // oletuksena png-kuva $filename = "kuva.jpg"; // kuva $kuva = imagecreatefromjpeg($filename); // luodaan kuva $koko = getimagesize($filename); // kuvatiedot taulukkoon $leveys = $koko[0]; // leveys $korkeus = $koko[1]; // korkeus if(!isset($_GET['sade'])) $sade = 30; // jos sädettä ei annettu, alkuarvo = 30 else $sade = $_GET['sade']; // värit $valkoinen = imagecolorallocate($kuva,255,255,255); $musta = imagecolorallocate($kuva,0,0,0); // jos kulmien väriä ei annettu, tehdään png-kuva. muuten tehdään jpg-kuva, jonka kulmat annetun värin väriset if(!isset($_GET['vari'])) $lapinakyva = imagecolorallocate($kuva,255,0,0); else { $varit = hex2dec($_GET['vari']); // väritaulu (punainen,vihreä,sininen) $lapinakyva = imagecolorallocate($kuva,$varit[0],$varit[1],$varit[2]); // väri läpinäkyväksi $jpg = true; // tehdään jpg-kuva } imagecolortransparent($kuva,$lapinakyva); // valittu läpinäkyväksi $viiva = $musta; // reunaviivan väri // piirretään kulmiin pyöreät kaaret imagearc($kuva,$sade-1,$sade-1,$sade*2,$sade*2,180,270,$viiva); // vasen ylä imagearc($kuva,$leveys-$sade-1,$sade-1,$sade*2,$sade*2,270,360,$viiva); // oikea ylä imagearc($kuva,$leveys-$sade-1,$korkeus-$sade-1,$sade*2,$sade*2,0,90,$viiva); // oikea ala imagearc($kuva,$sade-1,$korkeus-$sade-1,$sade*2,$sade*2,90,180,$viiva); // vasen ala // yhdistetään kaarien välit reunaviivoilla imageline($kuva,0,$sade-1,0,$korkeus-$sade-1,$viiva); // vasen reuna imageline($kuva,$sade-1,0,$leveys-$sade-1,0,$viiva); // yläreuna imageline($kuva,$leveys-1,$sade-1,$leveys-1,$korkeus-$sade-1,$viiva); // oikea reuna imageline($kuva,$leveys-$sade-1,$korkeus-1,$sade-1,$korkeus-1,$viiva); // alareuna // väritetään kulmat läpinäkyvällä värillä imagefilltoborder($kuva,0,0,$viiva,$lapinakyva); // vasen ylä imagefilltoborder($kuva,$leveys-1,0,$viiva,$lapinakyva); // oikea ylä imagefilltoborder($kuva,$leveys-1,$korkeus-1,$viiva,$lapinakyva); // oikea ala imagefilltoborder($kuva,0,$korkeus-1,$viiva,$lapinakyva); // vasen ala if($jpg) imagejpeg($kuva); // kuvan muodostus else imagepng($kuva); imagedestroy($kuva); // pois muistista // funktio muuntaa annetun heksavärin rgb-taulukoksi function hex2dec($hex) { $color = str_replace('#', '', $hex); // risuaita pois return array(hexdec(substr($color, 0, 2)),hexdec(substr($color, 2, 2)),hexdec(substr($color, 4, 2))); } ?>
Imagearc on siitä huono funktio, että suurta viivanpaksuutta käyttämällä kaaresta tulee todella ruma. Siksi tuossa on vain tuo yhden pikselin reunus. Ja värejä voi toki muuttaa haluamallaan tavalla. Nuo -1 - kikkailut johtuvat siitä että esimerkiksi vasemman yläreunan koordinaatit ovat 0,0.
Ihan kivalta vaikuttaa ja varmasti monelle on tuosta hyötyäkin :-)
Mukava skripti, mutta valokuvan tapauksessa kannattaisi varmaan pitää kuva JPG-muodossa, koska PNG:nä sen koko näyttäisi kymmenkertaistuvan.
Joo, hyvä huomautus. Tuo tosiaan jäi toi imagepng tuonne kun testailin skriptiä. Korjataanpa heti :)
Höh, mitäs taas höpötän. Eihän toi tietenkään toimi toi läpinäkyvyys jpg-kuvissa. Tietty yks mahdollisuus on värittää kulmat taustan värillä ja sit tuottaa jpg-kuva, mut muuten pitää käyttää tuota pngtä. Kun noi gif-funkkaritkin on disabloitu.
Ihan kätevä on, mutta tosta tulee aika ruma :D
IE:llä tuo läpinäkyvyys ei näytä toimivan.
Olen muuten huomannut että IE ja opera tukee läpinäkyvyyttä päinvastaisesti... eli IE:llä läpinäkyvä PNG-kuva on operalla ei-läpinäkyvä, ja toisinpäin :P
Eihän IE edes tue kunnolla läpinäkyviä PNG-kuvia.
Muokkasin skriptiä hieman. Jos kuvalle antaa parametrina värin, tekee skripti jpg-kuvan, jonka kulmat ovat annetun värin väriset. Muussa tapauksessa muodostetaan png-kuva, jonka kulmat ovat läpinäkyvät.
Uusimpiin IE versioihin saa PNGten läpinäkyvyyden osittain toimimaan pätkällä javascriptiä, ja ehdollisella kommentilla.. Googlettamalla löytyy noita ohjeita kasoittain. 5.5 ja vanhemilla ei auta itku markkinoilla.
Tosin muutenkin kannattaisi IEstä siirtyä oikeisiin selaimiin :D
hyvihä nuo png kuvat pelaa ie:ssä(versio 6) ilman mitään lisäjuttuja..
ja mielestäni turhaa keskustelua on jutut -vaihda selain muuhun..kyllä ie kuiteskin oman ja suht ptikän kokemukseni näyttää sivut parhaiten..edellyttäen että sivut on toteutettu kelvollisesti. tästähän voi jauhaa loputtomiin..
sivujen tekijänä vittumainen hommahan se on että selaimet eivät voi tukea samoja asioita..monessa yhteydessä on esitelty ideata että selaimiinkin pitäisi sisällyttää jonkinlainen vanhenemiskoodi, eli tietyn ajan jälkeen se ei pelaisi..tosin tämäkin vaatii sitten että selaimia todellakin kehitetään eteenpäin.
Internet Exploder - Maailman eniten hyväksikäytetty selain
Sukkaa, kun siinä ei toimi .png-kuvat kunnolla.
Kyllä se IE tukee PNG-kuvien läpinäkyvyyttä.
Tämän sain joskus aikaan kun kopioin gif-kuvan PHP:llä, ja tadaa! läpinäkyvä png IE:llä!
Tosin, tuo kuva taas ei näkynyt operassa, voih...
Aihe on jo aika vanha, joten et voi enää vastata siihen.