Jika Anda ingin mengambil tangkapan layar sebagian atau seluruh halaman web Anda menggunakan JavaScript, Anda mungkin akan terjebak. Membuat gambar dari elemen HTML bisa tampak seperti tantangan, karena tidak ada cara langsung untuk melakukannya di JavaScript.

Untungnya, ini bukan tugas yang mustahil dan sebenarnya cukup mudah dengan alat yang tepat. Menggunakan pustaka html-ke-gambar, membuat gambar simpul DOM semudah panggilan fungsi tunggal.

Bagaimana Cara Kerja html-ke-gambar?

Itu html-ke-gambar library menghasilkan gambar dalam bentuk URL data base64. Ini mendukung beberapa format output, termasuk PNG, JPG, dan SVG. Untuk melakukan konversi ini, perpustakaan menggunakan algoritma ini:

  1. Buat tiruan elemen HTML target, turunannya, dan elemen semu yang terlampir.
  2. Salin gaya untuk semua elemen kloning dan sematkan gaya sebaris.
  3. Sematkan font web yang relevan, jika ada.
  4. Sematkan gambar apa pun yang ada.
  5. Ubah simpul kloning menjadi XML, lalu SVG.
  6. Gunakan SVG untuk membuat URL Data.

Peringatan dan Batasan

instagram viewer

Meskipun html-to-image adalah perpustakaan yang bagus, itu tidak sempurna. Ini memiliki beberapa peringatan, yaitu:

  • Pustaka tidak akan berfungsi di Internet Explorer atau Safari.
  • Jika HTML yang Anda coba konversi menyertakan elemen kanvas tercemar, perpustakaan akan gagal. Sebagai MDN menjelaskan, termasuk data yang tidak disetujui-CORS di elemen kanvas Anda akan menodainya.
  • Karena browser membatasi ukuran maksimum URL data, ada batasan ukuran HTML yang dapat dikonversi oleh perpustakaan.

Menggunakan Perpustakaan

Untuk mencoba perpustakaan, hal pertama yang perlu Anda lakukan adalah membuat direktori proyek di mesin lokal Anda. Selanjutnya, instal html-to-image di direktori itu menggunakan manajer paket npm. Berikut perintah terminal untuk menginstalnya:

npm Install--simpan html-ke-gambar

Anda juga harus menginstal JavaScript bundler, untuk membuatnya sedikit lebih mudah untuk menggunakan perpustakaan. Itu membangun bundler dapat membantu mengemas modul node menjadi skrip yang kompatibel dengan web.

npm Install membangun

Itu saja yang Anda butuhkan untuk menginstal. Selanjutnya, buat file bernama index.html di direktori Anda, dan sajikan dengan server web pilihan Anda. Letakkan kode berikut di index.html:

<!doctype html>
<html lang="id">
<kepala>
<rangkaian meta ="UTF-8">
<nama meta ="area pandang"
 konten="lebar=lebar-perangkat, skala-pengguna=tidak, skala-awal=1,0, skala-maksimum=1,0, skala-minimum=1.0">
<meta http-equiv="Kompatibel dengan X-UA" konten="yaitu = tepi">
<judul>Dokumen</title>
<gaya>
 .colorful-div {
 bantalan: 3rem;
 warna putih;
 background-image: linear-gradient (ke kanan, kuning, rebeccapurple);
 perbatasan: 1px hitam pekat;
 margin: 1 rem otomatis;
 ukuran font: 3rem;
 font-family: kursif;
 }
</style>
</head>
<tubuh>
<kelas div="warna-warni-div">
 Saya'm akan berada di screenshot!
</div>
<kelas div="teks panjang">
 Saya'm contoh paragraf yang cukup bertele-tele yang
 mengilustrasikan bahwa mengambil tangkapan layar dalam JavaScript adalah
 benar-benar sangat mudah, karena alasan berikut:
<ul>
<li>Alasan 1</li>
<li>Alasan 2</li>
<li>Alasan 2</li>
</ul>
</div>
<skrip src="keluar.js"></script>
</body>
</html>

Kode ini membuat dua elemen pada halaman: div dengan latar belakang gradien, dan beberapa teks dan daftar tidak berurutan di dalam div lain. Selanjutnya, Anda akan menulis JavaScript untuk mengonversi elemen ini menjadi gambar. Masukkan kode berikut ke dalam file baru bernama script.js:

impor * sebagai htmlToImage dari "html-ke-gambar";
elemen konstan = ['.colorful-div', '.teks panjang']


elemen.untuk setiap((elemen, ind) => {
konstan simpul = dokumen.querySelector (elemen)
htmlToImage.toPng(simpul)
 .kemudian(fungsi (dataUrl) {
membiarkan img = baru Gambar();
 img.src = dataUrl;
dokumen.tubuh.tambahkanAnak(gambar);
 })
 .menangkap(fungsi(kesalahan){
 konsol.kesalahan('Ups! Ada yang tidak beres!');
menghibur.log (kesalahan)
 });
})

Kode ini melakukan beberapa hal:

  • Mengimpor perpustakaan html-ke-gambar.
  • Membuat larik yang terbuat dari pemilih CSS yang menargetkan dua elemen.
  • Membuat gambar PNG dalam bentuk URL data dari setiap elemen larik.
  • Membuat tag img dan menyetel atribut src ke URL data, membuat salinan gambar dari dua elemen.

Sekarang gunakan esbuild untuk menghasilkan file yang dibundel (keluar.js) yang direferensikan index.html dengan menjalankan perintah berikut di terminal Anda:

 ./node_modules/.bin/esbuild script.js --bundel --outfile=out.js

Pada titik ini, inilah tampilan index.html di browser Anda:

Meskipun salinannya terlihat persis sama dengan aslinya, mereka sebenarnya adalah elemen gambar. Anda dapat mengkonfirmasi ini dengan membuka alat dev Anda dan memeriksa mereka.

Pustaka ini juga berfungsi dengan kerangka kerja JavaScript. Itu dokumentasi html-ke-gambar berisi instruksi tentang cara menghasilkan format gambar lain. Ini juga termasuk contoh yang menunjukkan bagaimana menggunakan perpustakaan dengan React.

Mengambil Tangkapan Layar Dengan JavaScript Itu Mudah

Tidak ada metode JavaScript asli untuk membuat gambar dari elemen HTML, atau mengambil tangkapan layar dari DOM. Namun, dengan bantuan perpustakaan dan layanan seperti html-to-image, itu menjadi tugas yang mudah.

Ada cara lain untuk mencapai hasil yang serupa, seperti pustaka wkhtmltoimage. Anda dapat menggunakan alat sumber terbuka ini untuk mengambil tangkapan layar dari halaman web yang lengkap.