In web development, we often need to convert an element of HTML as image. This function is useful for a web with a “Print as Image” or “Save as Image” button option. In this article, I will provide a guide for converting HTML files to images using Javascript. One way that can be used to do this is by using the popular JavaScript library, HTML2Canvas.
What is the HTML2Canvas?
HTML2Canvas is an open-source JavaScript library that allows users to convert HTML elements into images. With HTML2Canvas, you can easily take screenshots of HTML elements.
Using Bootstrap to CSS Layouting
Before we go any further into HTML2Canvas, let’s add Bootstrap to our HTML page. Bootstrap is a popular front-end framework for building responsive and visually appealing layouts. We can take advantage of Bootstrap’s well-designed components to create a more attractive appearance for the elements we want to convert into images.
Include Library
The first step is to include the HTML2Canvas and Bootstrap CSS and JS libraries in our web project. You can download the HTML2Canvas file from the official website or use the Content Delivery Network (CDN) for 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>
<!-- Added script for HTML2Canvas -->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</body>
</html>
Define HTML Elements to Convert
After loading Bootstrap CSS, the next step is to determine the HTML elements you want to convert into images. Suppose we have a simple table as an example that we want to capture as an image.
<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>
If run, it will look like this:
Using HTML2Canvas to Take Screenshots
Now we have an HTML element that we want to convert into an image using HTML2Canvas. Next, let’s add a script to take a screenshot of the element.
<!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>
If the “Save” button is clicked, there will be a pop-up web to png. After that, you will get an image from a screenshot specifically for the table section like this:
Read also : Type of JavaScript Pop-ups
In this article, we have learned about how to convert HTML elements into images with the help of the HTML2Canvas library. We’ve also enriched the page’s appearance by using Bootstrap components to build visually appealing tables.
By using HTML2Canvas and Bootstrap, you can easily provide a screenshot feature in your web applications or save web page views in the form of images for various purposes. With this technique, users can easily share information and record web page views efficiently.
