Dalam keisengan saya, terbikinlah script untuk membuat ID-Card ini. Pada tahap pertama saya hanya membuat sangat sederhana. Sebuah form html, yang dieksekusi dengan php dengan mengambil value-value dari form, untuk kemudian di print di atas background gambar ID-Card.

Sebenarnya format html untuk keluaran bisa sederhana saja, taruh gambar sebagai background sehingga tulisan bisa langsung di isi di atasnya. Tetapi karena saya berharap agar output ini bisa di-save atau di kopi paste ke form email, maka saya bikin dengan model floating di atasnya.

Tetapi harapan saya ternyata tidak sepenuhnya terjadi. Gambar background memang bisa di-select dan di kopi atau save as, tetapi tulisan tidak terikutkan. Kalaupun di select semua lantas di kopi paste ke form email, jadinya tulisan terpisah dengan background.

Silakan coba di sini: http://rony.dgworks.net/uploads/ktp-idgmail/

Perbaikan dengan GD

Akhirnya saya memperbaiki script tersebut. Tentu saja setelah dipanas-panasi oleh Toni. Nah, untuk yang versi kedua ini, outputnya menjadi gambar semuanya. Dengan memanfaatkan fitur re-draw dari GD. Dari tulisan, hingga image background dan foto, semua digambar ulang dan disusun ulang.

Script tersebut sudah saya pasang di sini http://rony.dgworks.net/uploads/ktp-new/ Silakan dicoba!
Mengenai bagaimana sistem kerjanya, baiklah akan saya coba uraikan.

Keterangan Versi Beta

Form html yang saya buat masih tetap sama. Anda bisa melihatnya di sini. Dalam form tersebut ada blangko untuk mengisi:
- Nickname
- Nama
- URL Blog
- Social Networks (friendster, orkut, dll)
- Jenis Kelamin
- Upline (orang yang mengajak untuk bergabung ke ID-GMAIL) dan
- URL Foto

Nah, pada script eksekusinya, saya mengambil data tersebut dengan cara sederhana saja. Berikut fungsi yang saya pakai (script lengkap bisa di lihat di http://rony.dgworks.net/uploads/ktp-new/images.phps):

  $nik = $_POST['nik'];
  $name = $_POST['nama'];
  $blog = $_POST['blog'];
  $sns = $_POST['sns'];
  $upl = $_POST['upl'];
  $jk = $_POST['jk'];
  $foto = $_POST['foto'];

Nah, langkah berikutnya adalah menyiapkan file-file default, dalam hal ini adalah background dan tanda-tangan. Saya memanggilnya dengan script berikut:

  $background = imagecreatefromjpeg("img/back.jpg");
  $insert = imagecreatefromgif("img/ttd.gif");

Nah, setelah background dan image lain sudah siap, kita tinggal mengolah data isian. Dari semua karakter isian, hal yang paling rumit adalah mengolah foto. Agar foto yang dipasang bisa diolah, maka sebelumnya harus ditentukan dulu extension file tersebut. GD PHP hanya bisa berjalan dengan command yang tepat untuk extension yang sesuai. Gampangnya, lihat saja script berikut:

  $image_info = getImageSize($foto) ; // see EXIF for faster way
   switch ($image_info['mime']) {
       case 'image/gif':
           if (imagetypes() & IMG_GIF)  { // not the same as IMAGETYPE
               $insert2 = imageCreateFromGIF($foto) ;
           } else {
               $ermsg = 'GIF images are not supported‘;
           }
           break;
       case ‘image/jpeg’:
           if (imagetypes() & IMG_JPG)  {
               $insert2 = imageCreateFromJPEG($foto) ;
           } else {
               $ermsg = ‘JPEG images are not supported‘;
           }
           break;
       case ‘image/png’:
           if (imagetypes() & IMG_PNG)  {
               $insert2 = imageCreateFromPNG($foto) ;
           } else {
               $ermsg = ‘PNG images are not supported‘;
           }
           break;
       case ‘image/wbmp’:
           if (imagetypes() & IMG_WBMP)  {
               $insert2 = imageCreateFromWBMP($foto) ;
           } else {
               $ermsg = ‘WBMP images are not supported‘;
           }
           break;
       default:
           $ermsg = $image_info[’mime’].’ images are not supported‘;
           break;
   }
 

Dengan fungsi getimagesize(), maka kita bisa mendapatkan EXIF datanya. Dari sinilah mulai dipilah tugas yang harus dilakukan server. Perhatikan script di atas, untuk GIF di olah dengan script yang berbeda dengan JPEG, dan seterusnya. ERMSG itu maksud saya untuk meng-capture error dan mengeluarkan error message jika error terjadi. Tetapi pada akhirnya tidak saya pakai. Saya tidak menghapusnya, ya karena terlanjur saja.

Setelah foto bisa diidentifikasi, dan diambil oleh GD (redraw), maka selanjutnya adalah memasangnya. Oh ya, karena ada text di bagian data, maka kita perlu memerintahkan GD untuk me-redraw text tersebut dengan font pilihan kita. Dalam hal ini saya memilih arial. Font ini harus disediakan di server (seperti halnya file background dan tanda tangan –duh maaf gak urut).

Peletakan datanya, diurutkan dari yang paling bawah hingga yang paling atas. Artinya urutannya adalah foto, tandatangan, text-text. Background tidak dipanggil, karena background adalah tempat kita meletakkan foto dan text itu. Scriptnya adalah sebagai berikut:

  imagecopymerge($background,$img_dst,330,130,0,0,$iw,$ih,100);
  imagecopymerge($background,$insert,300,270,0,0,$insert_x,$insert_y,100);
  imagefttext($background,11,0,162,136,1,"ARIAL.TTF",$nik);
  imagefttext($background,11,0,162,164,1,"ARIAL.TTF",$name);
  imagefttext($background,11,0,162,193,1,"ARIAL.TTF",$blog);
  imagefttext($background,11,0,162,221,1,"ARIAL.TTF",$sns);
  imagefttext($background,11,0,162,272,1,"ARIAL.TTF",$upl);
  imagefttext($background,11,0,321,121,1,"ARIAL.TTF",$jk);

Oh ya, sebelumnya, kita harus me-resize ukuran foto yang dikirim oleh pengisi. Untuk melakukannya, caranya sederhana saja. Matematika SD lah. Kita tentukan dulu ukuran fix yang kita inginkan. Dalam hal ini saya memilih width = 100 pixel. Oleh karenanya, rumus untuk memperoleh tinggi (height) menjadi: (tinggi_awal x 100 / lebar_awal).

  $iw = 100;
  $ih = imagesy($insert2) * 100 / imagesx($insert2)

Untuk resize, scriptnya menjadi:

  $img_dst = imagecreatetruecolor( $iw, $ih );
  imagecopyresized( $img_dst, $insert2, 0, 0, 0, 0, $iw, $ih, $is, $iy );

Dengan $is dan $iy adalah ukuran asli, diperoleh dengan rumus:

  $is = imagesx($insert2);
  $iy = imagesy($insert2);

Nah, beres sudah. Sekarang tinggal mencetak hasilnya dengan perintah:

imagepng($background,“”,100);

Gampang bukan? Oh ya, jangan lupa untuk memasang script di bawah ini sebelum menuliskan perintah di atas, agar GD bisa me-render :
header (“Content-type: image/png”);

Yak, selesai. Script ID-Card generator ini sudah siap digunakan. Waduh hampir lupa, angka-angka yang muncul ketika ingin menampilkan gambar ataupun text itu adalah untuk menentukan posisi (berdasar pixle). Mengenai keterangan detilnya bisa dilihat di php.net deh, soalnya kalau menerangkan satu-satu, capek juga.

Baiklah, selamat bersenang-senang!

vale, demi kesehatan

el rony, mbathik!

NB: terimakasih buat Markum yang sudah mengawali mengenai GD ini.

Category: blog, how to, Technology, Daily Life | Comment RSS 2.0 | trackback