Tämä on ensimäinen oppaani. Älkää arvostelko liian rajusti
Tässä tutoriaalissa käsitellään GD-Libraryn peruskäyttö.
1. Yleistä
-1.1 Mikä on GD-Library?
GD-Library on PHP:n kirjasto, jolla voi käsitellä kuvia.
Se on hyvin tehokas työkalu ja se soveltuu moneen käyttöön.
-1.2 Mitä tarvitsen käyttääkseni GD-Librarya?
Tarvitset GD-Library extensionin, joka on tulee valmiina PHP 5:ssa.
GD:n voi ladata: http://www.boutell.com/gd/
MBnetissä on GD asennettu.
2. Perus funktiot
-2.1 Aloitus
Jotta hyötyisit tästä tutoriaalista täydellisesti, kannattaa osata PHP:n perusasiat.
Esimerkiksi muuttujat.
Aloitetaan->
GD:tä aletaan käyttää funktioilla (katso kommentointi):
- Koodi: Valitse kaikki
imagecreatefromgd ("TIEDOSTONIMI")
//Tällä funktiolla luodaan kuva GD muotoisesta tiedostosta
imagecreatefrompng ("TIEDOSTONIMI")
//Tällä funktiolla luodaan kuva PNG muotoisesta tiedostosta
imagecreatefromjpeg("TIEDOSTONIMI")
//Tällä funktiolla luodaan kuva JPG muotoisesta tiedostosta
//Jos käytät yllä olevia funktioita, niin se kuva joka ladataan on taustana!
imagecreate ( koko_x, koko_y )
//Tällä funktiolla tehdään tyhjä kuva.
Tämä ei yksin riitä, sillä kuvalle kannattaa määritellä muuttuja, jotta sitä voidaan käsitellä. Esim:
- Koodi: Valitse kaikki
$kuva=imagecreate (100,200); // HUOMAA ; Se pitää olla aina rivin lopussa!
Alussa kannattaa myös määritellä käytettävät värit, koska niitä tarvitsee melkein joka funktiossa.
Se tehdään seuraavasti:
- Koodi: Valitse kaikki
$tausta=imagecolorallocate(KUVASI NIMI (Muuttuja), PUNAINEN, VIHREÄ, SININEN);
//Värin määrittelyssä käytetään RGB arvoja. Kuvan nimi pitää olla se muuttuja, minkä me määrittelimme.
//ESIM:
$tausta=imagecolorallocate($kuva, 255, 0 ,0); //Väri on nyt punainen.
//Tämä ei vielä piirrä mitään
Kun haluamme tulostaa kuvan dokumenttiin, käytämme seuraavia funktioita:
- Koodi: Valitse kaikki
header("Content-type: image/jpeg"); //Tärkeä, että dokumenttia käsitellään kuvana!
//Voi myös olla esim. image/png
//tämän jälkeen käytämme funktiota:
imagejpeg($kuvannimi);
//Tämä voi olla myös imagepng(), imagegif(), imagewbmp() riippuen minkä tyypin ensiksi määritit.
//Jos olet käyttänyt pelkkää image_create funktiota, tällä ei ole väliä.
-2.2 Piirto
GD käsittelemään tiedostoon voi piirtää monella tapaa.
Ellipsin piirto:
- Koodi: Valitse kaikki
imageellipse ( Se kuva muuttuja, Keski_X, Keski_Y, Leveys, Korkeus, Väri )
//Kuva muuttuja=$kuva Väri= vaikka $tausta
//Täytetty ellipsi:
imagefilledellipse( ... Samat kuin edellisessä
//elikkä:
imagefilledellipse( Se kuva muuttuja, Keski_X, Keski_Y, Leveys, Korkeus, Väri )
Kuvan täyttö. Esim. Tausta
- Koodi: Valitse kaikki
imagefill ( Kuva Muuttuja, Aloitus X, Aloitus Y , väri )
//Esim:
imagefill ( $kuva, 0, 0, $tausta); //Maalaa taustan värillä $tausta
Mitä olemme tähän menneessä oppineet?
Yksinkertaisen hymiön piirto:
- Koodi: Valitse kaikki
<?PHP
/*----------------------------
TODELLA YKSINKERTAINEN HYMIÖ
----------------------------*/
$kuva=imagecreate ( 300, 300 ); //Aloitetaan luomalla kuva.
//Määritellään värit:
$tausta=imagecolorallocate($kuva, 0, 0 ,255);//$tausta on sininen.
$naama=imagecolorallocate($kuva, 255, 255 ,0);//$naama on keltainen.
$silma=imagecolorallocate($kuva, 0, 0 ,0);//$silma on musta.
$suu=imagecolorallocate($kuva, 0, 0 ,0);//samoin $suu.
imagefill ( $kuva, 0, 0, $tausta); //Maalaa taustan värillä $tausta
//Piirretään hymiö
imagefilledellipse( $kuva, 150, 150, 300, 300, $naama ); //ensiksi naama Koko kuvan kokoinen.
imagefilledellipse( $kuva, 90, 100, 75, 75, $silma ); // sitten silmät. SILMÄ1
imagefilledellipse( $kuva, 210, 100, 75, 75, $silma ); // SILMÄ2
imagefilledellipse( $kuva, 150, 200, 190, 20, $silma ); // Ja lopuksi suu.
header("Content-type: image/jpeg"); //Tärkeä, että dokumenttia käsitellään kuvana!
imagejpeg($kuva); //Tulostetaan
?>
Tulos: http://roskakori.no-ip.biz/esimerkit/hymio.php
Tehtäviä
1. Kokeile mitä tapahtuu jos otat header("Content-type: image/jpeg"); pois.
2. Yritä muuttaa silmien muotoa, väriä ja kokoa.
3. Yritä muuttaa kuva erimuotoiseksi. Esim. PNG
4. Koita vaihtaa muuttujien nimiä ja saada koodi toimimaan. Esim. $kuva->$pic
Neliön piirto:
- Koodi: Valitse kaikki
imagerectangle ( $kuva, x1, y1, x2, y2, $vari );
Polygonin piirto:
- Koodi: Valitse kaikki
$kuinkamontapistetta=6; //Kuinka monta pistettä polygoni käyttää.
//Polygonin pisteet kannattaa määritellä näin:
$pisteet = array(40, 50, 20, 240, 60, 60, 240, 20, 50, 40, 10, 10); //Tässä on kaikki pisteet
//Seuraava funktio piirtää polygonin kuvaan.
imagefilledpolygon($kuva, $pisteet, $kuinkamontapistetta, $vari);
Tekstin piirto:
- Koodi: Valitse kaikki
//GD:ssä on myös monia tekstin piirtoa käsitteleviä funktioita.
//Esittelen niistä kaksi:
imagestring ( $KuvanNimi,$Fontti(voit laittaa arvoksi 1), X-piste,Y-piste, "TEKSTI", $vari ); //Tämä on kaikista yksinkertaisin tapa piirtää tekstiä.
//Seuraavaksi tekstin piirto TTF fontilla.
imagettftext ( $KuvanNimi, $KuvanKoko, $Kulma (astetta), X-piste,Y-piste, $vari,"Fontin sijainti. Esim. C:/Windows/Fonts/OCRAext.TTF", "Teksti" );
Viivan piirto:
- Koodi: Valitse kaikki
imageline ( $Kuva, x1, y1, x2, y2, $vari );
Mitä olemme tähän menneessä oppineet?
Yksinkertaisen pakettiauton piirto yksinkertaisella taustalla (tausta ladataan tiedostosta):
- Koodi: Valitse kaikki
<?PHP
/*----------------------------
TODELLA YKSINKERTAINEN AUTO
----------------------------*/
$kuva=imagecreatefromjpeg ("rekka_tausta.jpg"); //Aloitetaan luomalla kuva. Kuva on valmiiksi tehty.
//Määritellään värit:
$auto=imagecolorallocate($kuva, 255, 255 ,0);//$auto on keltainen.
$teksti_v=imagecolorallocate($kuva, 0, 0 ,0);//$teksti_v on musta.
$rengas=imagecolorallocate($kuva, 0, 0 ,0);//samoin $rengas.
imagefilledellipse($kuva,95,238,70,70,$rengas); //RENKAAT AUTON TAAKSE PIILOON. HUOMAA JÄRJESTYS!
imagefilledellipse($kuva,339,238,70,70,$rengas);
imagefilledpolygon($kuva, array(30,110,300,110,372,176,456,176,456,239,39,237), 6, $auto);//PIIRRETÄÄN AUTON MUOTO
//Piirretään teksti auton päälle.
imagettftext($kuva,20,4,77,190,$teksti_v,"C:/WINDOWS/FONTS/OCRAext.ttf","Iiron Kuljetus");
//TULOSTETAAN
header("Content-type: image/jpeg"); //Tärkeä, että dokumenttia käsitellään kuvana!
imagejpeg($kuva); //Tulostetaan
?>
Tulos: http://roskakori.no-ip.biz/esimerkit/rekka.php
Tehtäviä
1. Yritä muuttaa tekstin fonttia, kokoa ja väriä.
2. Koita tehdä autosta hienompi. (Julkaisen ehkä hienoimman tässä topicissa)
3. Koita muuttaa tausta yksiväriseksi.
3. Hyötykäyttö
Kohta 2 oli vain johdantoa GD:n käyttöön. Nyt alkaa työ->
Tämä osio näyttää miten käytetään GD:tä hyvin, ja miten sitä on järkevä käyttää.
-3.1 Asiat mitä kannattaa tehdä
1. Koodissa kannattaa aina käyttää IF lauseita (paitsi debugissa). Perustelu:
- Koodi: Valitse kaikki
if(!($kuva=imagecreate(200,200))){ //Jos kuvaa ei voi ladata
echo "Tapahtui virhe. Ota yhteyttä (erikeepperi90@hotmail.com)!"; //Tulostetaan virhe.
exit; //Ei enää jatketa. Tämä näyttää paljon järkevämmältä kuin viisi riviä virheilmoituksia.
}
2. Kannattaa aina kirjoittaa koodi selvästi sisennettynä ja kannattaa nimetä muuttujat järkevästi. Perustelu:
- Koodi: Valitse kaikki
//VERTAA TÄTÄ
if( ( $kuva=imagecreate( 200,200 ) ) ){
$laatikko_vari=imagecolorallocate($kuva, 255, 255 ,0);//keltainen.
$tausta_vari=imagecolorallocate($kuva, 0, 0 ,0);//musta.
imagerectangle ( $kuva, 10, 10, 190, 190, $laatikko_vari );
imagefill ( $kuva, 0, 0, $tausta_vari );
header("Content-type: image/jpeg");
if( !( imagejpeg($kuva) ) ){
header("Content-type: text/html");
echo "Kuvaa ei voitu tulostaa, koska se voi sisältää virheitä.";
}
}
//TÄHÄN->
if(($piz=imagecreate(200,200))){
$n167=imagecolorallocate($piz, 255, 255 ,0);//keltainen.
$tvasda=imagecolorallocate($kuva, 0, 0 ,0);//musta.
imagerectangle ( $piz, 10, 10, 190, 190, $ln167 );
imagefill ( $piz, 0, 0, $tvasda );
header("Content-type: image/jpeg");
if((imagejpeg($piz))){
header("Content-type: text/html");
echo "Kuvaa ei voitu tulostaa, koska se voi sisältää virheitä."; }
}
-3.2 Hyödyllisiä funktioita
1. imagesx( KUVA ) ja imagesy( KUVA ). Palauttaa kuvan leveyden ja korkeuden. Esim:
- Koodi: Valitse kaikki
$kuva=imagecreate(222,200);
$leveys=imagesx($kuva); //$leveys=222
//Funktio on hyödyllinen kun kuva avataan tiedostosta.
$kuva=imagecreatefromjpg("kuva.jpg");
imagesx($kuva); //laskee kuva.jpg:n leveyden.
//Voidaan käyttää jos halutaan vaikka skaalata kuvaa.
$kuva=imagecreatefromjpg("kuva.jpg");
$uusi_leveys=imagesx($kuva)/10;
$uusi_korkeus=imagesy($kuva)/10; //Jaetaan kuvien koot kymmenellä.
$uusikuva=imagecreate($uusi_leveys,$uusi_korkeus);
//--> Jatketaan sitten kun päästään funktioon: imagecopyresized()
2. imagedestroy ( $kuva ) Tämä vapauttaa muistia. Kannattaa kutsua aina kuvan jälkeen.
3. imagecolortransparent ( $kuva , $vari (ei pakollinen) ) Asettaa kuvan läpinäkyvän värin.
4. imagecopy funktiot. Eli imagecopyresized($kohde (uusi kuva), $kuva, 0, 0, 0, 0, $uusileveys, $uusikorkeus, $leveys, $korkeus);
- Koodi: Valitse kaikki
//-> Jatketaan:
imagecopyresized($kuva, $uusikuva, 0, 0, 0, 0, $uusi_leveys, $uusi_korkeus, imagesx($kuva), imagesy($kuva));
header("Content-type: image/jpeg");
imagejpeg($uusikuva);
imagedestroy($uusikuva);
KOKO KOODI:
- Koodi: Valitse kaikki
$kuva=imagecreatefromjpeg("kuva.jpg");
$uusi_leveys=imagesx($kuva)/2;
$uusi_korkeus=imagesy($kuva)/2; //Puolet pienempi kuva
$uusikuva=imagecreate($uusi_leveys,$uusi_korkeus);//Luodaan uusi kuva.
imagecopyresized($uusikuva,$kuva, 0, 0, 0, 0, $uusi_leveys, $uusi_korkeus, imagesx($kuva), imagesy($kuva)); //kopioidaan kuva uuteen kuvaan.
header("Content-type: image/jpeg"); //Tulostukset
imagejpeg($uusikuva);
imagedestroy($uusikuva); //Vapautetaan muistia.
-3.3 Lopputyö.
Teemme kuvan joka piirtää satunnaisesti viivoja. (ei ole vaikea tehdä.)
Tässä se alkaa->
- Koodi: Valitse kaikki
<?PHP
$v=0;
$i=0;
$vari="";
if(isset($_GET['number'])){ //Voit itse määrittää määrän.
$a=$_GET['number'];
}else{ //Muuten se arvotaan
$a=rand(4,300);
}
$kuva=imagecreate(400,500); //Tehdään kuva.
//Määritellään muuttujat
$random=rand(0,100);
$x=10;
$y=imagesy($kuva);
//Määritellään värit:
$valkoinen = imagecolorallocate($kuva, 255, 255, 255);
$musta = imagecolorallocate($kuva, 0, 0, 0);
$vihrea = imagecolorallocate($kuva, 0, 255, 0);
$sininen = imagecolorallocate($kuva, 0, 0, 255);
imagefill($kuva,0,0,$musta);//tausta
//Piirretään viivat.. Käytetään while lauseketta.
while($i<$a){
$vari=imagecolorallocate($kuva, rand(0,255), rand(0,255), rand(0,255)); //Alustetaan väri randomilla.
$v=rand(0,3); //arvotaan väri
switch ($i) { //käytetään switch:iä Piirretään viivat
case 0:
$vari=$valkoinen;
break;
case 1:
$vari=$vihrea;
break;
case 2:
$vari=$sininen;
break;
case 3:
$vari=imagecolorallocate($kuva, rand(0,255), rand(0,255), rand(0,255)); //Random Väri
break;
}
imageline ( $kuva, rand(0,imagesx($kuva)), rand(0,imagesy($kuva)), rand(0,imagesx($kuva)), rand(0,imagesy($kuva)), $vari ); //Lisätään viiva
$i=$i+1;
}
//Tulostetaan kuva PNG-muodossa:
header("Content-Type: image/png");
imagepng($kuva);
?>
Tulos: http://roskakori.no-ip.biz/esimerkit/pylvas.php
3. Luettavaa
Tässä on hyödyllisiä linkkejä:
http://fi.php.net/manual/fi/ref.image.php
http://www.ohjelmointiputka.net/opas.php?tunnus=gdlb (vähän parempi kun mun
)
Tulen vielä lisäilemään.
4. Esimerkkejä
Tähän tulen lisäilemään esimerkkejä kun on aikaa.
Nonniin. Tässä se sitten oli. GD-opas aloittelijoille. Toivottavasti tämä auttaa teitä GD:n ja-/tai PHP:n opiskelussa.
