Menampilkan Gambar Pada HTML Tanpa File Terpisah

Menampilkan Gambar Pada HTML Tanpa File Terpisah


Umumnya untuk menampilkan gambar pada HTML membutuhkan sebuah tag misalnya <img src="http://www.ilmuwebsite.com/images/tutorial/html7.jpg" />, tapi ternyata ada cara lain untuk menampilkan gambar tanpa file terpisah.
Caranya seperti biasa, hanya ditambahkan beberapa data pada atribut src saja.

<img src="data:(MIME);base64,(base64)" alt="" />

IW-AutoBlog: Tools Untuk Otomatisasi Pembuatan dan Upload Konten Blog, Sudah digunakan lebih dari 110 Blogger Expert. Ayo Pesan Sebelum Harga Naik Lagi!!

Cocok untuk Anda yang tidak ingin direpotkan oleh pekerjaan harian seperti membuat konten dan posting harian, biarkan autoblog yang bekerja untuk Anda, semua serba otomatis. Cocok untuk SEO. Tak ada yang se-MUDAH, se-FLEKSIBEL & se-POWERFULL IW-AutoBlog dalam mengotomatisasi pembuatan konten Blog. Lebih lengkap silahkan kunjungi di sini)


Penjelasan:
(MIME) diisi dengan jenis gambarnya, misal image/jpeg, image/png, image/gif, dll. Sedangkan (base64) maksudnya adalah data dalam bentuk biner yang telah di-encode dalam bentuk base64.
Misal saya ingin menampilkan gambar berjenis PNG, file gambarnya bernama gambar.png.

Langkah pertama adalah mengambil isi dari file gambar.png kemudian di-encode kedalam bentuk base64.
Potongan kode PHP dibawah ini saya buat sebagai contoh saja untuk mengambil isi dari file gambar.png kemudian tampilkan ke browser dan tulis kedalam file gambar.txt dalam bentuk base64.

<?php? $imgfile = "gambar.png"; //nama file

$imgbinary = base64_encode(fread(fopen($imgfile, "r"), filesize($imgfile))); /*masukkan data ke dalam variabel $imgbinary */

echo '<img src="data:image/png;base64,' . $imgbinary . '" alt="" />'; /* tampilkan ke browser */
$handle = fopen("gambar.txt", "w"); /* buat handle untuk membuka file gambar.txt dengan mode write */
fwrite($handle, $imgbinary); /* tulis data dari variabel $imgbinary kedalam file gambar.txt */
fclose($handle); /* lepaskan handle */
?>

Oke selamat mencoba. Trims.

Artikel Terkait :