In this article, I will be able to show you ways to convert Html div to a picture using JQuery. Here, I'm generating an HTML div element on the client-side to image png using the html2canvas.js library.
HTML5 has some excellent features; you'll draw charts using canvas tag later you'll reserve it as image png or JPEG format.
To begin, download the latest jQuery library and import it into the online page, we'd like another js library Html2canvas.js, for both I referred cdn, when the user clicks the convert to image button, the div element gets an image printed on canvas then downloaded to the local drive as picture using client-side jQuery.
<!DOCTYPE html>
<html>
<head>
<title>
How to convert an HTML element
or document into image ?
</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
.main-content{
background-color: #F0F0F1;
color: #00cc65; width: 500px;padding-left: 25px;
padding-top: 10px;
}
.heading{color: #3e4b51;}
#html-content-holder p{color: #3e4b51;}
</style>
</head>
<body>
<center>
<h2 style="color:green">
Blazingcoders
</h2>
<h2 style="color:purple">
Convert div to image
</h2>
<div id="html-content-holder" class="main-content">
<strong>
Blazingcoders
</strong>
<hr/>
<h3 class="heading">
ABOUT US
</h3>
<p>
Website Design and mobile application development company in coimbatore, India. We have more than years of experience in the IT Services with more than 400 clients. Services we provide website design, web development, Business application development, Facebook marketing, Digital marketing, Mobile Application Development and SEO services
</p>
</div>
<input id="btn-Preview-Image" type="button"
value="Preview" />
<a id="btn-Convert-Html2Image" href="#">
Download
</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage"></div>
<script>
$(document).ready(function() {
var element = $("#html-content-holder");
var getCanvas;
$("#btn-Preview-Image").on('click', function() {
html2canvas(element, {
onrendered: function(canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function() {
var imgageData =
getCanvas.toDataURL("image/png");
var newData = imgageData.replace(
/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr(
"download", "convertedimage.png").attr(
"href", newData);
});
});
</script>
</center>
</body>
</html>
The success of a software development project depends on selecting the appropriate development team. Companies frequently struggle with whether to hire a full-time development team or freelance softwa
Read More
Cracking Trivago: Revolutionising Trip Arranging The process of organizing a holiday has changed dramatically in the modern era. Travel arrangements used to be made by going to travel age
Read More
Schools are constantly looking for efficient methods to draw in potential students in an increasingly competitive educational environment. Reaching a larger audience is only one aspect of effective le
Read More