Saturday 24 May 2008

Manipulasi image part 2


text2image.php
File pertama kita adalah text2image.php, yang merupakan interface masukan dari user, file ini akan mengirimkan gambar yang kemudian akan di proses oleh file textCODE.php. File text2image.php memiliki inti pada form masukan, sehingga kita akan lihat kodenya langsung di bagian inti ini saja.
kode program untuk text2image.php adalah sebagai berikut:

<div style="width: 770px; text-align: left;">
<h1>Combination between image and text</h1>
<p>
<form action="textCODE.php" enctype="multipart/form-data" method="POST" target="_blank">
Pilih file Gambar : <input type="file" name="source" value="cari" size="40"><br>
Text yang diinginkan : <input type="text" name="teks" value="AsyhadiOne" maxlength="30"><br>
Sudut : <input type="text" name="sudut" size="3" value="0" maxlength="3"><br>
<input type="submit" value="Proses">
</form>
</p>
</div>
Berikut adalah penjelasannya: baris 1-3 merupakan tata letak dari form masukan dengan judul adalah Combination between image and text, baris berikutnya adalah form masukan yang terdiri atas tiga buah input/masukan yaitu: bertype file, dan dua buah bertype text. Form ini nantinya akan dikirim ke halaman textCODE.php dengan method adalah POST. Yang perlu kita perhatikan adalah nama dari tiap input, hal ini dikarenakan nama tersebut nanti akan dibaca oleh variabel yang akan kita buat di textCODE.php. Nama yang kita gunakan adalah source, teks dan sudut. Yang terakhir adalah tombol submit yang akan mengirimkan data ke textCODE.php.
textCODE.php
<?php
header("Content-type:image/jpeg");
$image = @imagecreatefromjpeg("$source")
or die("Tidak ada dukungan library GD!!!");
$background_color = imagecolorallocate($image,0,0,0);
$text_color = imagecolorallocate($image,255,0,0);
$pos_x = imagesX($image)-(imagesX($image)/2);
$pos_y = imagesY($image)-10;
$sudut = $_POST['sudut'];
$text = $_POST['teks'];
imageTTFtext ($image,12,$sudut,$pos_x,$pos_y, $text_color,"naruto.ttf",$text);
imagejpeg($image);
imagedestroy($image);
?>
Penjelasan untuk kode tersebut adalah:
1. Dengan kode ini kita akan membuat sebuah gambar dengan tipe jpg. Pada baris pertama, pada header kita set untuk memberi tahu bahwa akan dibuat gambar dengan tipe jpg. Jika kita ingin membuat tipe yang lain, semisal png atau gif, maka headernya perlu kita sesuaikan.
2. Berikutnya kita membuat variabel $image, dimana variabel ini akan menampung file gambar yang dikirim dari text2image.php pada variabel $source. Karena kita membuat dari gambar yang sudah jadi dan bertipe jpg, maka fungsi yang digunakan adalah imagecreatefromjpeg.
3. Selanjutnya kita seting untuk warna latar dan warna text yang akan kita gunakan. Fungsi yang akan kita gunakan adalah ImageColorAllocate yang memiliki 4 parameter. Parameter pertama adalah gambar yang sedang kita tangani dan tiga parameter selanjutnya adalah menunjuk pada warna yang akan digunakan yaitu Red, Green dan Blue (RGB). Nilai/value yang digunakan adalah dalam bentuk angka integer antara 0 sampai 255.
4. Pada empat baris berikutnya kita mengatur penempatan dari teks yang kita kirim, sudut yang akan digunakan dan pesan text yang dimasukan oleh user. pertama halaman ini akan menentukan penempatan teks dalam gambar pada sumbu X. saya mencoba untuk menempatkannya tepat mulai dari tengah gambar sehingga kodenya imagesX($image)-(imagesX($image)/2), saya tidak menetapkan angka integer sebab ukuran tiap gambar nantinya saya yakin akan berbeda-beda. kemudian dilanjutkan dengan menentukan penempatan teks pada sumbu Y. kedua proses penempatan tersebut mengambil nilai dari fungsi imagesX untuk sumbu X dan imagesY untuk sumbu Y.variabel $sudut dan $text merupakan variabel yang akan menerima masukkan dari user yang berupa besarnya sudut dan teks yang dimasukkan user. $_POST saya gunakan agar track di halaman url tidak terlihat oleh user, anda pun bisa saja menggunakan $_GET.
5. Pemasukan teks sendiri dilakukan oleh fungsi imageTTFtext(), parameter yang digunakan adalah sebagai berikut:
1. gambar dari user.
2. ukuran dari teks yang diinginkan.
3. sudut penulisan teks yang diinginkan.
4. posisi teks pada sumbu X.
5. posisi teks pada sumbu Y.
6. warna dari teks.
7. nama font yang digunakan, pastikan font ini terletak pada direktori yang sama dengan file yang menggunakannya.
8. teks yang ditulis oleh user akan masuk disini.
setelah itu selesai maka gambar jpg akan ditampilkan menggunakan imagejpeg() ke layar browser. fungsi imagedestroy() digunakan untuk membersihkan server setelah gambar selesai dibuat, biar ga memenuhi sever gitu. Catatan: kode program diatas diasumsikan jika server web anda sudah mendukung FreeType Support enable, sehingga kita bisa menentukan huruf, dan sudut yang akan digunakan. Jika ternyata server web anda tidak mendukung FreeType support, maka anda bisa menggunakan kode sederhana berikut yang menggunakan fungsi imagestring:

imagestring($image,12,5,15,"Teks Sederhana",$text_color);
imagejpeg($image);
imagedestroy($image);

Demikian untuk bagian yang kedua, tunggu bagian ketiga

No comments: