Blog

Convert URL Gambar Menjadi Base64 dengan Javascript

 

Convert URL Gambar Menjadi Base64 dengan Javascript

Javascript     3 bulan yang lalu


Terkadang kita perlu untuk melakukan konversi gambar ke dalam format lain, semisal blob atau base64.

Ditulisan kali ini saya akan berbagi pengalaman saat melakukan konversi file gambar ke dalam format base64.

Sebelum melakukan konversi, harap dipastikan terlebih dahulu file gambar berada dalam satu server yang sama atau tidak? kalau dari server yang berbeda tentu dibutuhkan setting CORS supaya dapat diakses oleh kita.

Disini kita akan melakukan konversi menggunakan javascript. Pertama-tama kita buat fungsi yang akan kita panggil saal melakukan konfersi gambar nantinya.

function convertImgToBase64URL(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
      var canvas = document.createElement('CANVAS'),
      ctx = canvas.getContext('2d'), dataURL;
      canvas.height = img.height;
      canvas.width = img.width;
      ctx.drawImage(img, 0, 0);
      dataURL = canvas.toDataURL(outputFormat);
      callback(dataURL);
      canvas = null;
    };
    img.src = url;
}

fungsi diatas kita buat untuk proses konvert gambar ke base64. Kita memanfaatkan canvas HTML5.

Bagaimana? sedehana kan? Semoga bermanfaat.


Kami membuat aplikasi pelayanan kependudukan dan administrasi untuk Desa dan Kelurahan. Demo bisa diakses di https://dash.klandesa.com. Silahkan gunakan email: demo@klandesa.com dan password: 123456


CARI ARTIKEL
Card image cap
AUTHOR: Wisnu

"Client-facing" person. His goal - help clients/projects succeed and always coding.


Lihat Project Kami | Bertemu Tim Kami

Tertarik berkerja dengan kami? Email disini:
wisnu@tipa.co.id