[Contoh] Cara Menentukan Font pada Watermark Gambar dengan PHP

Pada contoh lalu, watermark adalah merupakan suatu tulisan timpa pada gambar, yang biasanya digunakan untuk memberi teks sebuah image gambar jpeg/png/gif sebagai keterangan atau sebagai proteksi. Penimpaan gambar akan menggabungkan tulisan dan gambar pada satu gambar image. Pada contoh lalu telah terdapat satu model watermark untuk toko online, dimana terdapat satu gambar kaos yang diberi tulisan di depannya. Kali ini kita ingin memperindah tulisan tersebut dengan font yang bervariasi. Variasi juga dapat meliputi pembentukan shadow atau bayangan. Bagaimanakah caranya? Perhatikan gambar berikut.

Gambar ini dibentuk dengan pembentukan gambar dengan watermark dilengkapi dengan fasilitas pengatur font dan sudut font. Jika pada contoh lalu kita gunakan :

 

imagestring( $o_gambar, 5, 80, 80, "Stok Ada", $color1 );

Maka sekarang akan digantikan dengan

imagettftext( $o_gambar, $ukuran_font, $sudut_miring, $pixel_start_kiri, $pixel_start_atas, $warna, $jenis_font, $text );

Sedangkan shadow, atau bayangan diambil dengan cara membuat tulisan serupa dengan warna yang berbeda, dan diberikan selisih pixel_start_kiri dan pixel_start_atas nya.


imagettftext($o_gambar, 16, 30, 51, 151, $color1, $font, $text);
imagettftext($o_gambar, 16, 30, 50, 150, $color2, $font, $text);

Sudut dapat diatur sesuai derajatnya. Silakan mencoba mengganti angka 30 tersebut menjadi angka sudut yang anda suka. Misal tulisan tegak, maka silakan mengganti dengan angka 90 dengan konsekuensi mengubah start pixelnya.

Dengan $jenis_font diambilkan dari file TTF yang anda miliki. File TTF adalah file master dari sebuah font. Misal dalam kasus ini saya ambil Arial. Maka source code pembentuk gambar akan menjadi seperti berikut:


Bisakah membuat tulisan di bawahnya lagi? Tentu saja bisa. Hanya dengan membuat sebuah tulisan, dan mengatur start pixel atasnya, maka akan terbentuk satu tulisan lagi, sesuai dengan pixelnya. Mudah bukan? Selamat mencoba semoga sukses, dan semoga artikel ini bermanfaat.

[Contoh] Cara Membuat Watermark Tulisan Pada Gambar dengan PHP

Jika posting sebelum ini membahas tentang dua gambar yang ditumpuk, bagaimanakah jika yang akan ditumpuk pada gambar utama adalah tulisan data? PHP memiliki fasilitas untuk melakukan hal itu. Misalnya kita memiliki gambar sebagai berikut:

 

Gambar tersebut anggaplah merupakan sebuah produk dari toko online. Gambar produk tersebut akan diberi tanda sesuai data kondisi yang ada. Misal : Stock Tersedia, All Size, Sold, Kosong, Booked, dan sejenisnya. Kita ingin tulisan yang dibentuk adalah tulisan yang benar-benar ada pada gambar, bukan tulisan bentukan CSS dengan z-index di depan, sehingga tulisan akan menjadi bagian dari gambar. Bisakah? Mari kita coba percobaan seperti demikian.

 

 




 

Hasilnya kira-kira adalah seperti berikut :

 

.

Kita bisa melakukan pengubahan data “Stock Ada” dan sejenisnya dengan cara memberikan fasilitas form updatenya. Di lain posting akan dibahas lebih lengkap :).

Nah, selamat mencoba, semoga sukses, dan semoga artikel ini bermanfaat.

[Contoh] Cara Menumpuk Join Dua Gambar dengan PHP ( watermark )

Mungkin anda pernah melihat gambar seperti berikut :

 

 

Perhatikan pada bagian kanan bawah, anda akan melihat sebuah gambar berupa tulisan yang menimpa gambar utama. Gambar penumpuk tersebut dinamai dengan watermark. Biasanya anda akan kerepotan membuat watermark ini dengan menggunakan photosop atau corel baru kemudian diupload. Namun sebenarnya PHP memiliki kemampuan untuk mengolah hal tersebut. Dengan memanfaatkan kemampuan itu, maka kita dapat dengan mudah upload sembarang gambar tanpa watermark lebih dulu, dan akan secara otomatis terbentuk watermark dengan PHP.

Dengan fasilitas tersebut, maka banyak hal yang bisa dilakukan antara lain :

  • Memberi tanda SOLD / atau terjual pada produk toko online, jika produk tersebut telah terjual
  • Memberi proteksi gambar agar mempersulit proses penjiplakan oleh orang lain, karena akan terbawa tulisan watermarknya
  • Memberi keterangan gambar langsung pada gambarnya
  • dan lain sebagainya

 

PENUMPUKAN DUA GAMBAR

Proses penumpukan dua gambar akan dilakukan dengan memanfaatkan fasilitas GD PHP  Disini saya memiliki dua buah gambar, yang satu adalah skak.jpg, dan satunya adalah skak_text.jpg.

skak.jpg

Gambar kedua adalah skak_text.jpg

 

skak_text.jpg

 

Gambar ini akan kita tumpuk dengan posisi background adalah skak.jpg menjadi background bagi skak_text.jpg. Selain itu, skak_text.jpg akan diberi transparansi agar background masih terlihat. Maka akan kita bangun script seperti berikut:

 




 

Gambar yang akan dihasilkan adalah seperti berikut

 

Nah mudah kan?

Lantas bagaimana untuk membuat proses Upload? Mudah, tinggal menambahkan baris penambah form, filterisasi jika upload terset, dan pengambilan file dengan mengambil gambar dari tmp_name

Seperti berikut:




 

Nah, sebelum lanjut, selamat mencoba, semoga sukses, dan semoga artikel ini bermanfaat. 🙂

[Contoh] Cara Sederhana Membuat Image Gambar dengan PHP

Tentu kita sering melihat tulisan berformat gambar semacam ini :

Kemudian kita juga sering melihat CAPTCHA atau Verification Code yang berupa gambar tulisan namun dapat berubah-ubah secara acak / random. Ternyata hal itu dapat kita buat sendiri dengan PHP biasa. PHP memang menyediakan fasilitas untuk mengolah image termasuk membuat gambar. Namun memang installasi PHP kita harus terinstall secara lengkap termasuk paket GD. Namun biasanya pada paket webserver kita telah tersedia. Xampp, Wamp, AppServ dan lain-lain telah menyediakannya. Untuk para pengguna Linux, tentu dapat dengan mudah melakukan installasinya. Untuk para pengguna Debian, Ubuntu dan turunannya, dapat menggunakan perintah : apt-get install php5-gd, atau apt-get install php-gd. Sedangkan pengguna RedHat, Fedora, Centos dan turunannya dapat menggunakan yum install php5-gd.

Untuk membuat script tersebut, sangat mudah caranya. Hanya saja karena sintaks yang tersedia untuk pembuatan Image ini cukup banyak, tak apalah jika kita menyediakan catatan tentang hal itu. Secara lengkap vocab perintah tersebut dapat dilihat di sini http://php.net/manual/en/book.image.php. Kita tidak akan membahas seluruhnya, namun hanya beberapa untuk dijadikan contoh pertama.

Kali ini kita akan buat sebuah script pembuat image tulisan. Misal akan kita buat tulisan dengan bunyi : bimosaurus.com, dengan warna kuning, background hitam, maka akan kita buat script sedemikian :


Kemudian kita simpan sebagai image.php, panggillah di web browser. Kita dapat melakukan penyisipan ke dalam halaman lain dengan cara html biasa:


Nah ternyata mudah bukan… Lain posting akan dibahas gambar yang lebih kompleks. Selamat mencoba, semoga bermanfaat.

[Tips] Cara Merezise Gambar dengan SimpleImage PHP Script

PHP adalah sebuah bahasa pemrograman web sisi server. Sebagai bahasa pemrograman sisi server, maka PHP juga memiliki kemampuan melakukan olah data baik berupa data text dan data gambar. Kemampuan ini terutama digunakan ketika PHP mengerjakan Gallery gambar, atau sebuah profil produk dimana harus tersedia gambar berbagai ukuran Pixel dan Byte nya. Sebagai contoh kasus adalah sebuah toko online, memiliki kebutuhan sisi admin dimana operator harus mampu melakukan upload gambar dengan ukuran berapapun, selanjutnya akan diatur oleh PHP dengan dipecah menjadi beberapa. Antara lain adalah menjadi gambar thumbnail, gambar medium dan gambar besar. Bayangkan saja jika halaman depan sebuah profil produk menampilkan banyak gambar dan gambar tersebut masih berukuran besar 800kb – 1mb, tentu akan memakan waktu dan juga quota bandwidth bagi client.

SimpleImage ini bisa disalin di http://www.white-hat-web-design.co.uk/blog/resizing-images-with-php/ dan silakan dijadikan sebuah file dengan nama SimpleImage.php. Namun menurut saya, ada beberapa revisi dari script tersebut. Yaitu pada bagian yang melibatkan $this->getheight(), diubah menjadi $this->getHeight(). Sehingga script SimpleImage ini menjadi seperti ini


image_type = $image_info[2];
      if( $this->image_type == IMAGETYPE_JPEG ) {
 
         $this->image = imagecreatefromjpeg($filename);
      } elseif( $this->image_type == IMAGETYPE_GIF ) {
 
         $this->image = imagecreatefromgif($filename);
      } elseif( $this->image_type == IMAGETYPE_PNG ) {
 
         $this->image = imagecreatefrompng($filename);
      }
   }
   function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {
 
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image,$filename,$compression);
      } elseif( $image_type == IMAGETYPE_GIF ) {
 
         imagegif($this->image,$filename);
      } elseif( $image_type == IMAGETYPE_PNG ) {
 
         imagepng($this->image,$filename);
      }
      if( $permissions != null) {
 
         chmod($filename,$permissions);
      }
   }
   function output($image_type=IMAGETYPE_JPEG) {
 
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image);
      } elseif( $image_type == IMAGETYPE_GIF ) {
 
         imagegif($this->image);
      } elseif( $image_type == IMAGETYPE_PNG ) {
 
         imagepng($this->image);
      }
   }
   function getWidth() {
 
      return imagesx($this->image);
   }
   function getHeight() {
 
      return imagesy($this->image);
   }
   function resizeToHeight($height) {
 
      $ratio = $height / $this->getHeight();
      $width = $this->getWidth() * $ratio;
      $this->resize($width,$height);
   }
 
   function resizeToWidth($width) {
      $ratio = $width / $this->getWidth();
      $height = $this->getHeight() * $ratio;
      $this->resize($width,$height);
   }
 
   function scale($scale) {
      $width = $this->getWidth() * $scale/100;
      $height = $this->getHeight() * $scale/100;
      $this->resize($width,$height);
   }
 
   function resize($width,$height) {
      $new_image = imagecreatetruecolor($width, $height);
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
      $this->image = $new_image;
   }      
 
}
?>

CARA MENGGUNAKAN.
Cara menggunakan script ini sangat mudah. Yaitu:

  1. Melakukan include SimpleImage.php
  2. Membuka sebuah object dari Class SimpleImage
  3. Meload gambar
  4. Mengolah gambar
  5. Menyimpan gambar dengan format baru

CONTOH: Misalkan kita akan membuat sebuah form upload gambar, dimana ketika diupload, maka gambar di server akan muncul dengan format ukuran 400×400 dan juga thumbnail 120×120. Dengan demikian script menjadi seperti demikian :


include "includes/SimpleImage.php";


if( isset( $_POST['upload'] ) ){
$file = $_FILES['upfile']['tmp_name'];

$image = new SimpleImage();

$image->load($file);

$image->resize(400,400);

$image->save("../images/product/".$_FILES['upfile']['name']);

$image->resize(120,120);

$image->save("../images/product/thumb/".$_FILES['upfile']['name']);		
}
?>


Gambar

PENJELASAN:
Ketika script dipanggil request, maka jika tidak terset input type upload alias karena belum ada POST, maka hanya akan ditampilkan form biasa. Selanjutnya jika telah diisi, dan diPOST, maka script akan terpanggil dengan kondisi terset POST. Selanjutnya akan di-include SimpleImage, menentukan variable file yang diupload, diload, diolah resize, dan disimpan pada tempat yang telah ditentukan pada save.

Berikut beberapa operasional yang disediakan oleh SimpleImage ini:

  1. Load
  2. Save
  3. Output
  4. GetWidth dan GetHeight
  5. Resize to Height dan resize to width
  6. Scale
  7. Resize

Dengan SimpleImage, selamat mencoba proses upload gambar dan melakukan operasional standard SimpleImage. Semoga bermanfaat. 🙂