Konversi Gambar ke Base64 dengan jQuery

Menurut wikipedia, Base64 adalah sekelompok skema pengkodean biner-ke-teks yang mewakili data biner dalam format string ASCII dengan menerjemahkannya ke dalam representasi radix-64. Wahh ribet ya ? 🙂

Versi sederhananya adalah kumpulan karakter atau string. Gambar juga bisa dikonversi menjadi kumpulan string base64. Dengan Base64, gambar yang di-load oleh website akan sangat ringan, karena website seperti memanggil text saja.

Berikut ini adalah contoh kode Konversi Gambar menjadi Base64 dengan menggunakan jQuery

<!DOCTYPE html>
<html>
<head>
    <title>How to convert image into base64 string jQuery?</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
 
<body>
 
<form>
    <input type="file" name="image" onchange="encodeImagetoBase64(this)">
    <p class="hasil"></p>
</form>
 
<script type="text/javascript">
 
   function encodeImagetoBase64(element) {
      var file = element.files[0];
      var reader = new FileReader();
      reader.onloadend = function() {
              $(".hasil").text(reader.result);
      }
      reader.readAsDataURL(file);
 
    }
 
</script>
 
</body>
</html>