Create an HTML to JPG Converter using HTML CSS JavaScript
In this blog, We have learn a simple application to convert HTML content or table to JPG image. To do this, we have used PHP for server-side logic, HTML codes, CSS for styling, and JavaScript for the conversion process.
Step 1: Setting Up the Project Structure
Create a new folder on your local system for your project and inside it, create the following files:
- index.php
- style.css
- script.js
Your project structure should look like this:
/html-to-jpg
|– index.php
|– style.css
|– script.js
Step 2: HTML Details (index.php)
Go inside your folder open index.php and add the following code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML to JPG Converter</title>
<link rel=”stylesheet” href=”style.css”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
</head>
<body>
<main id=”main” class=”container main”>
<section class=”section dashboard”>
<div class=”row justify-content-center”>
<div class=”col-lg-10″>
<div class=”card p-4″>
<h1 class=”text-center”>HTML to JPG</h1>
<form action=”” method=”POST”>
<div class=”row mb-4″>
<div class=”col-md-8″>
<input type=”text” name=”product_title” id=”model_check” class=”form-control” autocomplete=”off” placeholder=”Search Here” value=””>
</div>
<div class=”col-md-4″>
<input type=”submit” name=”submit” value=”Convert” class=”button_check w-100″>
</div>
</div>
</form>
<?php if(isset($_POST[‘submit’])): ?>
<div id=”main_text”>
<div class=”text-end mb-3″>
<button id=”dw_bt”>Download to JPG</button>
</div>
<div id=”invoice” class=”box p-4 border rounded bg-white”>
<h2 class=”post_title mb-4″><?php echo htmlspecialchars($_POST[‘product_title’]); ?></h2>
<div class=”text-center mb-4″>
</div>
<div class=”row”>
<div class=”col-lg-6″>
<table class=”table table-bordered”>
<thead>
<tr>
<th colspan=”2″>Test One</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<!– Add more rows as needed –>
</tbody>
</table>
</div>
<div class=”col-lg-6″>
<table class=”table table-bordered”>
<thead>
<tr>
<th colspan=”2″>Test Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<!– Add more rows as needed –>
</tbody>
</table>
</div>
</div>
<div class=”row”>
<div class=”col-lg-6″>
<table class=”table table-bordered”>
<thead>
<tr>
<th colspan=”2″>Test Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<!– Add more rows as needed –>
</tbody>
</table>
</div>
<div class=”col-lg-6″>
<table class=”table table-bordered”>
<thead>
<tr>
<th colspan=”2″>Test Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<tr>
<td>Conding India</td>
<td>Coding India Lab</td>
</tr>
<!– Add more rows as needed –>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</section>
</main>
Step 3: Adding CSS for Styling (style.css)
Open style.css and add the following code to style your page:
body {
background-color: #f8f9fa;
font-family: Arial, sans-serif;
}
.main {
margin-top: 50px;
}
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
font-weight: bold;
margin-bottom: 20px;
}
.form-control {
border-radius: 0;
box-shadow: none;
border: 1px solid #ced4da;
}
.button_check {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button_check:hover {
background-color: #0056b3;
}
.image_data {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.table th, .table td {
text-align: center;
vertical-align: middle;
padding: 15px;
border-color: #dee2e6;
}
.table th {
background-color: #007bff;
color: #fff;
}
.table {
margin-bottom: 30px;
}
#dw_bt {
background-color: #28a745;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#dw_bt:hover {
background-color: #218838;
}
Step 4: JavaScript Details(script.js)
Open the script.js and add the following code to handle the conversion of HTML to JPG:
document.addEventListener(“DOMContentLoaded”, function() {
var ticket = document.getElementsByClassName(“box”)[0];
var download_button = document.getElementById(“dw_bt”);
if (ticket && download_button) {
download_button.addEventListener(“click”, () => {
domtoimage.toJpeg(ticket)
.then((data) => {
var link = document.createElement(“a”);
link.download = “download.jpg”;
link.href = data;
link.click();
})
.catch((error) => {
console.error(“An error occurred while generating the image:”, error);
});
});
} else {
console.error(“Element not found. Ensure that the element with class ‘box’ and the download button are rendered correctly.”);
}
});
Step 5: Run or test the HTML to JPG converter application on your local server or live server.
To run this application you have to open and run your local server xampp or you can upload all the files on your live server.
For the local server, Open a browser and navigate to http://localhost/html-to-jpg/. and for the live server go to your public_html root directory upload the all files on the server, and run https://yourdomain.com/html-to-jpg/. After running, you can enter the test in the input field and click on the button. After clicking you will see the HTML data and you can download it in JPG image format.
Output
