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="" />

Pengen Belajar Web Development HTML CSS JQuery Javascript Codeigniter Lebih Lengkap, Mudah, dan Lebih Terstruktur?

Pake Modul Video Tutorial Interaktif Mudah Jelas Gamblang, Nggak Pakai Ribet, Kenapa Video? Kalo Ebook Atau Buku Tebelnya minta ampun Gan. Mumpung Ada Promo, Beli Sekarang Dah Gan!! Promo Tutorial Premium Mahir Web Development Bangun 5 Project Website + Mahir Membuat 4 Aplikasi Android + Bonus Tutorial Membuat Themes Wordpress Premium, 3 Tutorial Isi 5 Dvd Cuma Rp 150rb Aja Gan (harga normal Rp 296rb) !!! Terbatas Sampe 12 Februari 2020 (Yang Bikin Videonya Udah Pengalaman Di Web Development Lebih Dari 15 Tahun Gan!!) (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online 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 :