Get Image From Url And Convert To Base64 Javascript

MUAZHAN

5 min read

·

Jun 19, 2024

51

Share

Cara Mendapatkan Gambar dari URL dan Mengonversinya ke Base64 dengan JavaScript

Dalam dunia pengembangan web, seringkali kita perlu mengambil gambar dari URL dan mengonversinya ke format Base64 untuk berbagai keperluan, seperti:

• Menyisipkan gambar dalam HTML secara dinamis: Base64 memungkinkan kita untuk menanamkan gambar langsung di dalam kode HTML, tanpa perlu file terpisah.
• Mengirim gambar ke server: Mengirim gambar dalam format Base64 memudahkan proses pengiriman dan penerimaan data.
• Menampilkan gambar dalam canvas: Base64 merupakan format yang dapat digunakan secara langsung dalam canvas untuk manipulasi gambar.

Berikut adalah langkah-langkah sederhana untuk mengambil gambar dari URL dan mengonversinya ke Base64 dengan JavaScript:

1. Membuat Fungsi getImageBase64

function getImageBase64(imageUrl, callback) {
  const img = new Image();
  img.crossOrigin = 'Anonymous'; // Untuk menghindari error CORS

  img.onload = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    const dataURL = canvas.toDataURL('image/png'); // Ubah ke format yang Anda inginkan
    callback(dataURL);
  };

  img.onerror = (error) => {
    console.error('Error loading image:', error);
    callback(null);
  };

  img.src = imageUrl;
}

Fungsi getImageBase64 menerima dua parameter:

• imageUrl: URL gambar yang ingin diambil.
• callback: Fungsi yang akan dipanggil setelah gambar berhasil diambil dan dikonversi ke Base64. Fungsi ini akan menerima dataURL sebagai parameter.

Kode di atas:

1. Membuat objek Image dan menetapkan URL gambar ke properti src.
2. Menambahkan event listener onload untuk menjalankan kode setelah gambar berhasil dimuat.
3. Membuat objek canvas dan context untuk menggambar gambar di atasnya.
4. Menggambar gambar di atas canvas.
5. Mengonversi gambar di canvas ke format Base64 menggunakan metode toDataURL().
6. Memanggil fungsi callback dengan dataURL sebagai parameter.
7. Menambahkan event listener onerror untuk menangani error jika terjadi masalah saat mengambil gambar.

2. Memanggil Fungsi getImageBase64

getImageBase64('https://www.example.com/gambar.jpg', (dataURL) => {
  if (dataURL) {
    console.log('Gambar berhasil dikonversi ke Base64:', dataURL);

    // Lakukan sesuatu dengan dataURL, seperti:
    // Menyisipkan gambar ke dalam HTML:
    document.getElementById('imageContainer').innerHTML = ``;

    // Mengirim gambar ke server:
    // ...

    // Menampilkan gambar dalam canvas:
    // ...
  } else {
    console.error('Gagal mengambil gambar');
  }
});

Dalam contoh di atas, kita memanggil fungsi getImageBase64 dengan URL gambar dan sebuah fungsi anonim sebagai callback. Fungsi callback akan dijalankan setelah gambar berhasil dikonversi ke Base64. Di dalam callback, kita memeriksa apakah dataURL ada. Jika ada, kita dapat menggunakan dataURL untuk berbagai keperluan.

Penjelasan Singkat:

• img.crossOrigin = 'Anonymous': Atribut ini penting untuk menghindari error CORS (Cross-Origin Resource Sharing) saat mengambil gambar dari domain yang berbeda.
• canvas.toDataURL('image/png'): Metode ini mengonversi gambar di canvas ke format Base64. Anda dapat mengubah formatnya menjadi 'image/jpeg' atau lainnya.

Kesimpulan

Dengan menggunakan fungsi getImageBase64 yang telah kita buat, Anda dapat dengan mudah mengambil gambar dari URL dan mengonversinya ke format Base64. Ini memungkinkan Anda untuk melakukan berbagai manipulasi gambar dalam JavaScript, seperti menyisipkan gambar ke dalam HTML, mengirim gambar ke server, dan menampilkan gambar dalam canvas.