How to convert an HTML element or document into image ?

18 Jul, 2019
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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>          <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js">    </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:
HTML-Misc
Picked
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.