Simpan HTML menjadi Gambar dengan HTML2Canvas

Dalam dunia pengembangan web, seringkali kita perlu merubah elemen HTML dan menyimpannya sebagai gambar. Fungsi ini berguna untuk mencatat tampilan halaman web, menyediakan opsi “Print” atau “Save as Image” dalam aplikasi web, atau berbagi informasi dalam bentuk gambar dengan pengguna. Pada artikel ini saya akan memberikan panduan untuk merubah atau konversi simpan HTML menjadi Gambar.

Salah satu cara yang dapat digunakan untuk melakukan ini adalah dengan menggunakan library JavaScript yang populer, yaitu HTML2Canvas.



Apa itu HTML2Canvas?

HTML2Canvas adalah sebuah library JavaScript open-source yang memungkinkan pengguna untuk mengubah elemen HTML menjadi gambar. Dengan HTML2Canvas, Anda dapat dengan mudah mengambil tangkapan layar (screenshoot) dari elemen HTML.



Menggunakan Bootstrap untuk Tata Letak

Sebelum kita melangkah lebih jauh ke HTML2Canvas, mari kita tambahkan Bootstrap ke halaman HTML kita. Bootstrap adalah kerangka kerja front-end yang populer untuk membangun tata letak yang responsif dan menarik secara visual. Kita dapat memanfaatkan komponen-komponen Bootstrap yang telah dirancang dengan baik untuk membuat tampilan yang lebih menarik bagi elemen yang ingin kita konversi menjadi gambar.



Langkah 1: Instalasi dan Penyiapan

Langkah pertama adalah menyertakan library HTML2Canvas dan Bootstrap CSS dan JS ke dalam proyek web Anda. Anda dapat mengunduh file HTML2Canvas dari situs web resminya atau menggunakan Content Delivery Network (CDN) untuk Bootstrap.

<!DOCTYPE html>
<html>
<head>
  <title>Mengkonversi HTML ke Gambar dengan HTML2Canvas dan Bootstrap</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<!-- Tambahkan script untuk HTML2Canvas-->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

</body>
</html>


Langkah 2: Definisikan Elemen HTML untuk Dikonversi

Setelah memuat Bootstrap CSS, selanjutnya adalah menentukan elemen HTML yang ingin Anda konversi menjadi gambar. Misalkan kita memiliki sebuah tabel sederhana sebagai contoh yang ingin kita tangkap sebagai gambar.

<div class="container mt-5">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <!-- Tabel Bootstrap -->
      <table class="table table-bordered" id="elemen-untuk-diambil">
        <thead>
          <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Usia</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>30</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td>28</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Michael Johnson</td>
            <td>35</td>
          </tr>
        </tbody>
      </table>
      <!-- Akhir Tabel Bootstrap -->
    </div>
  </div>
</div>

<div class="text-center">
  <button onclick="ambilTangkapanLayar()" class="btn btn-primary mt-3" id="tombol-ambil">Simpan</button>
</div>



Langkah 3: Menggunakan HTML2Canvas untuk Mengambil Tangkapan Layar

Sekarang kita sudah memiliki elemen HTML yang ingin kita konversi menjadi gambar menggunakan HTML2Canvas. Selanjutnya, mari kita tambahkan script untuk mengambil tangkapan layar dari elemen tersebut.

<!DOCTYPE html>
<html>
<head>
  <title>Mengkonversi HTML ke Gambar dengan HTML2Canvas dan Bootstrap</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <!-- Tabel Bootstrap -->
      <table class="table table-bordered" id="elemen-untuk-diambil">
        <thead>
          <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Usia</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>30</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td>28</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Michael Johnson</td>
            <td>35</td>
          </tr>
        </tbody>
      </table>
      <!-- Akhir Tabel Bootstrap -->
    </div>
  </div>
</div>

<div class="text-center">
  <button onclick="ambilTangkapanLayar()" class="btn btn-primary mt-3" id="tombol-ambil">Simpan</button>
</div>

<!-- Tambahkan script untuk HTML2Canvas dan Bootstrap JS dan JQuery -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script>
function ambilTangkapanLayar() {
  const target = document.getElementById('elemen-untuk-diambil');

  html2canvas(target).then((canvas) => {
    const gambarBase64 = canvas.toDataURL("image/png");
    var tautanUnduh = document.createElement('a');
    tautanUnduh.setAttribute("href", gambarBase64);
    tautanUnduh.setAttribute("download", "hasil.png");
    tautanUnduh.click();
    tautanUnduh.remove();
  });
}
</script>

</body>
</html>

Langkah 4: Hasil

Jika dijalankan, maka tampilannya akan seperti ini:

Convert HTML ke Gambar Image dengan HTML2Canvas
Tampilan awal HTML

Jika tombol “Simpan” di klik, maka akan ada sebuah pop up untuk menyimpan gambar. Setelah itu anda akan mendapatkan gambar dari tangkapan layar khusus bagian tabel saja seperti ini:

HTML ke Gambar dengan HTML2Canvas
Hasil akhir dari HTML2Canvas

Baca juga : Jenis-Jenis JavaScript Pop-ups

Dalam artikel ini, kita telah mempelajari tentang cara mengkonversi simpan elemen HTML menjadi gambar dengan bantuan library HTML2Canvas. Kita juga telah memperkaya tampilan halaman dengan menggunakan komponen Bootstrap untuk membangun tabel yang menarik secara visual.

Dengan menggunakan HTML2Canvas dan Bootstrap, Anda dapat dengan mudah menyediakan fitur tangkapan layar dalam aplikasi web Anda atau menyimpan tampilan halaman web dalam bentuk gambar untuk berbagai keperluan. Dengan teknik ini, pengguna dapat dengan mudah berbagi informasi dan mencatat tampilan halaman web secara efisien.

Sumber Youtube : SouthBridge (How to Download/Convert HTML to PNG Image)

Similar Posts