Cara Mengonversi HTML ke Gambar di JavaScript

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?

Pustaka html-ke-gambar 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

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. Seperti yang dijelaskan MDN, memasukkan data yang tidak disetujui CORS di elemen kanvas Anda akan mencemarinya.
  • 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 tersebut menggunakan manajer paket npm. Berikut perintah terminal untuk menginstalnya:

See also  Cara Mengubah Latar Belakang Safari di iPhone dan iPad

npm install 

Anda juga harus menginstal JavaScript bundler, untuk membuatnya sedikit lebih mudah untuk menggunakan perpustakaan. Bundel esbuild dapat membantu mengemas modul node ke dalam skrip yang kompatibel dengan web.

npm install esbuild

Itu saja yang perlu Anda instal. 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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.colorful-div {
padding: 3rem;
color: white;
background-image: linear-gradient(to right, yellow, rebeccapurple);
border: 1px solid black;
margin: 1rem auto;
font-size: 3rem;
font-family: cursive;
}
</style>
</head>
<body>
<div class="colorful-div">
I'm going to be in a screenshot!
</div>
<div class="long-text">
I'm an example of a sufficiently verbose paragraph that
illustrates that taking screenshots in JavaScript is
really very easy, for the following reasons:
<ul>
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 2</li>
</ul>
</div>

<script src="out.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:

import * as htmlToImage from "html-to-image";

const elems = ['.colorful-div', '.long-text']

elems.forEach((elem, ind) => {
const node = document.querySelector(elem)

htmlToImage.toPng(node)
.then(function (dataUrl) {
let img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!');
console.log(error)
});
})

Kode ini melakukan beberapa hal:

See also  8 Aplikasi untuk Membantu Anda Menambah Berat Badan dengan Cara yang Sehat

  • 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 

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

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

Pustaka ini juga berfungsi dengan kerangka kerja JavaScript. 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.