Home > Menengah > Web Development > Tutorial PHP > Menampilkan Gambar Pada HTML Tanpa File Terpisah

.

14 Komentar Untuk Artikel Ini BYag0y

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

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.

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



14 Response untuk Artikel Ini

  1. sholeh

    keuntungannya apa gan? file terpisah maksudnya gmn?


  2. Riko

    Mantap


  3. langga

    bagus juga sih sebenernya untuk web gallery, tp kebanyakan yg di encode itu path directory jadi g ketehuan letak pathnya :D

    Nice share… Thanks


  4. pdf boz

    siiiiip gannnn


  5. eric

    mas coding nya salah smua,,ada yang kurang.


  6. Hipni Rohman

    Makasih kode html-nya saya copy…


  7. PhebeX

    saya udah coba,

    ternyata gak berhasil di HTML. atau ada yang terlewat oleh saya?

    Atau Source tersebut hanya bisa diPHP?
    berarti judul threadnya seharusnya “Menampilkan Gambar Pada WEB Tanpa File Terpisah”

    Terima kasih sebelumnya.
    mohon maaf bila kelewatan.


  8. novi

    gmn,,,???
    saya udh coba ,tp ndak bisa,,,???


  9. tonob23

    thanks, Mantaff gan


  10. admin

    oh bisa kayak gitu ternyata :)


  11. Satyapradana

    maaf om kalo lancang, cuma mau menambahkan kalo pengapit kode PHP diatas kelebihan tanda tanya –> <?php?


  12. rahmat solihin

    wah terima kasih gan,,,,saya coba dechhhh


  13. Kursus Web Design

    Informasi yang berguna. Sangat baik dan berguna bagi banyak orang.


  14. kursus web design

    Nice share gan, tp untuk yg belum bisa php sptnya cukup rumit


You must be logged in to post a comment.

eXTReMe Tracker