Convert URL Gambar Menjadi Base64 dengan Javascript

Javascript

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.

Artikel Terkait

Populer

;