Konversi Gambar ke Base64 dengan jQuery

Update Terakhir pada

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>