Artikel ini dapat digunakan, disalin, dan disebarluaskan. Cukup cantumkan sumber asli. Jika isinya mengandung kebenaran, semoga memberi kebaikan bagi kita yang memanfaatkannya. Jika ada yang salah, mohon kiranya penulis dimaafkan. Dan sangat baik, jika kesalahan tersebut dapat diberitahukan kepada penulis.
Yanmarshus, 17 November 2006, yan[at]daunsalam[dot]net

Bermain-main dengan HTML

Kadang-kadang membuat yang tak serius itu perlu. Ide ini juga tidak orisinil dari saya. Sudah ada yang berbuat sebelumnya. Jadi jangan salahkan saya jika menimbulkan masalah :) Untuk menampilkan gambar/image dalam halaman HTML tentu digunakan tag <img> yang merujuk ke sebuah file gambar. Bagaimana kalau kita menampilkan sebuah gambar dalam halaman HTML tanpa harus merujuk ke file gambar tersebut. Mungkinkah menampilkan gambar hanya dengan tag HTML yang ada. Jelas jawabnya mungkin. Karena memang sudah ada yang kurang kerjaan melakukannya.

Idenya sangat mudah. Buat sebuah tabel. Atur agar tinggi dan lebar sebuah td adalah 1 pixel x 1 pixel. Ini bisa dengan CSS. Lalu susunlah td ini menjadi sebuah gambar. Satu buah td adalah untuk satu pixel gambar. Lalu warna pixel ditentukan dengan attribut bgcolor yang ada dalam td. Sederhana sekali. Hanya akibatnya yang agak menakutkan. Kalau sebuah gambar dalam format JPG berukuran 15 KB, dengan cara ini ukurannya bisa membengkak sebanyak lebih 10 kali lipat! Namanya juga main-main.

Terus caranya membuat gambar dengan cara ini? Saya menggunakan script PHP sederhana. Baca setiap pixel yang ada dalam file gambar. Lalu konversi setiap pixel tersebut ke sebuah <td bgcolor=#xxxxxx></td>. Dengan nilai #xxxxxx sesuai dengan warna pixel yang dibaca dari gambar. Selesai.

Script PHP untuk konversi di atas sederhananya seperti berikut

<?php

$namafile = "gambar.jpg";
$img = imagecreatefromjpeg($namafile);
$lebar = imagesx($img);
$tinggi = imagesy($img);

$img2 = imagecreatetruecolor($lebar,$tinggi);
imagecopy($img2,$img,0,0,0,0,$lebar,$tinggi);

$tabel = "<table border=0 cellspacing=0 cellpadding=0>\n";
$j = 0;
for ($y = 0; $y < $tinggi; $y++) {
  $tabel .= "<tr>";
  for ($x = 0; $x < $lebar; $x++) {
    $warna = imagecolorat($img2,$x,$y);
    $r = ($warna >> 16) & 0xFF;
    $g = ($warna >> 8) & 0xFF;
    $b = $warna & 0xFF;
    $rh = str_pad(dechex($r),2,"0",STR_PAD_LEFT);
    $gh = str_pad(dechex($g),2,"0",STR_PAD_LEFT);
    $bh = str_pad(dechex($b),2,"0",STR_PAD_LEFT);
    $wh = "#" . $rh . $gh . $bh;
    $tabel .= "<td bgcolor=$wh></td>";
  }
  $tabel .= "</tr>\n";
}
$tabel .= "</table>\n";

echo $tabel;

?>

Ini contohnya (17 KB zip) yang sudah dalam bentuk sebuah file HTML. Contoh tersebut sudah ditambahi dengan ornamen lain agar tambah menarik.