.

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.

Tutorial Premium Mahir Web Development Membangun 5 (jenis) Project Website + Mahir Membuat Aplikasi Android (4 Project + Upload Playstore)

Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)


<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.

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


eXTReMe Tracker