Enkripsi Gambar Dengan Metode Base64

Enkripsi Gambar Dengan Metode Base64 di halaman HTML

Welcome to KF-84 Al-Ambity Bloggist Ankshana

Selamat malam semua!!

Sebenarnya sih sambil iseng-iseng saja, saya bikin postingan Tips & Trik Kode untuk mengenkripsi gambar dengan metode base64 di halaman HTML ini. Jadi nantinya bila gambar yang kita enkripsi, tak perlu upload ke server. Cukup dengan menyalin (copy) hasil enkripsinya pada atribut src di elemen <IMG> saat codding halaman web berbasis HTML.

Apa sih HTML itu?

Untuk yang masih newbie ;-) Saya cuma bisa kasih sedikit keterangan bahwa, HTML adalah salah satu bahasa pemrograman untuk membuat website/blog.

Naah, kalo maksud dari kode enkripsi gambarnya itu sendiri apa?
Maksudnya adalah agar alamat/url sumber asli gambar tersebut tidak diketahui orang lain, faham?!?

OK, kita langsung ke pembahasan yaa.. #CheckItOut

Contoh script code HTML-nya adalah sebagai berikut:

<img src="data:image/png;base64,PasteHasilEnkripsiDisini"/> 

Isi nilai string SRC hasil enkripsi ini juga bisa di copy-paste di kolom url pada browser kesayangan kalian, nanti gambarnya akan di tampilkan.
Contoh skrip program-nya untuk yang suka pake javascript adalah:

---

Pilih gambar untuk di enkripsi:

---

Source code javasript untuk program di atas :

<!-- Bagian untuk memilih lokasi gambar !-->
Pilih gambar untuk di enkripsi: <input type="file" id="loc" style="" />
<!-- Ini bagian untuk menampilkan hasil enkripsi !-->
<textarea wrap="virtual" rows="5" id="cod" style="width: 230px;"></textarea>
<!-- Ini bagian untuk menampilkan gambar secara otomatis setelah lokasi gambar ditentukan !-->
<img id="img" src="" height="auto" />
<!-- Kalau ini, bagian kode javasript program enkripsi-nya !-->
<script type="text/javascript">
var imgOut  = document.getElementById('img');
var imgCod  = document.getElementById('cod');
function readFile() {
    if (this.files && this.files[0]) {
        var FRid= new FileReader();
        FRid.addEventListener('load', function(e) {
            imgOut.src = e.target.result;
            imgCod.innerHTML = e.target.result;
        });
        FRid.readAsDataURL(this.files[0]);
    }
}
document.getElementById('loc').addEventListener('change', readFile);
</script>

Untuk yang suka pake PHP (tapi ga' mau di PHP-in), contoh skrip program-nya adalah:

<?php
function imageBase64FromURL($location){
    $urlParts   = pathinfo($location);
    $extension  = $urlParts['extension'];
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $location);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $response   = curl_exec($ch);
    curl_close($ch);

    $base64 = 'data:image/'.$extension.';base64,'.base64_encode($response);
    return $base64;
}
?>

Untuk penggunaan/kode pemanggilnya, adalah sebagai berikut:

<?php
$urlImages  = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZAo_ZycboPpQ1V_Juk_Fudnz4v6XPMTHM5RTTLhTVLhOPEY825FBELoHyDetUgcc1v9EcT4TRue1dDnmPqyZ0qQKI9Zfmt4TjnQPJT19lATWV7rZ_D8K4w6yigS201gwfNHn65maIGo/s1600/Screenshot-3.png';
$encodeImg  = imageBase64FromURL($urlImages);
echo $encodeImg;
?>

Silahkan ganti string pada variabel $urlImages dengan alamat gambar yang akan di enkripsi.

Hmm.. bagi yang masih kurang mengerti, silahkan tanyakan melalui kolom komentar. Terima kasih sebelum dan sesudahnya. Untuk selebihnya silahkan anda kreasikan sendiri sesuai selera, OK?!?

Selamat Mencoba!!

Terima kasih telah membaca artikel ini, silahkan SUKAI dan BAGIKAN halaman ini bila anda merasakan hal yang sama! Karena berbagi itu indah..

---

Thanks for read this article, please LIKE and SHARE this page if you feel the same! Because a sharing is beautiful..

---

Present by

The Bloggist Ankshana Al-Ambity