This article is going to tell and guide the users to convert a div element into an image using AngularJS. The user will be generating an image from the webpage and also be able to convert a particular part of the HTML page into the picture. Also, the user needs an HTML tag and html2canvas JavaScript library. By using this, we can create the pictures i.e. converting the HTML page to an image in PNG or JPEG formats. Also handling the ul, li and the required div tag to the image format. To summarize it, the html2canvas library will be rendering the HTML page to the preferred image format that is mentioned by the user. It means that the user will be able to create the screenshot of the div or any element of the WebPage.
Approach:
- There are two buttons in the web-page, one used for preview the image of web-page and other button is used to download the image of web-page.
- Convert an html page into image using html2canvas JavaScript library.
- When user click on preview button, the html2canvas() function called and this function also call another function which append the preview of canvas image.
- When user click on Download button, then first change the document into image format and then start downloading it instead of displaying the image.
Example:
<!DOCTYPE html> <html>
<head>
<title>
How to convert an HTML element
or document into image ?
</title>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color:green">
GeeksForGeeks
</h2>
<h2 style="color:purple">
Convert div to image
</h2>
<div id="html-content-holder" style="background-color: #F0F0F1;
color: #00cc65; width: 500px;padding-left: 25px;
padding-top: 10px;">
<strong>
GeeksForGeeks
</strong>
<hr/>
<h3 style="color: #3e4b51;">
ABOUT US
</h3>
<p style="color: #3e4b51;">
<b>GeeksForGeeks</b> is a portal and a forum
for many tutorials focusing on Programming
ASP.Net, C#, jQuery, AngularJs, Gridview, MVC,
Ajax, Javascript, XML, MS SQL-Server, NodeJs,
Web Design, Software and much more
</p>
<p style="color: #3e4b51;">
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide
well written, well thought and well
explained solutions for selected questions.
</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() {
// Global variable
var element = $("#html-content-holder");
// Global variable
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");
// Now browser starts downloading
// it instead of just showing it
var newData = imgageData.replace(
/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr(
"download", "GeeksForGeeks.png").attr(
"href", newData);
});
});
</script>
</center>
</body>
</html>
|
Output:
Article Tags :