Convert HTML To Canvas | Canvas To Downloadable PNG | JPG Image | html2canvas | JavaScript |

Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas. Hello friends in this video i will be showing you how to convert html elements to canvas and how to convert canvas to image which can be downloable in client side. In this tutorial I'm using html2canvas . js library to convert html element to canvas. i hope you will like this video.

Source Code to Convert HTML to Canvas and Canvas to downloadable png / jpeg image


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Importing the html2canvas library from CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.0/html2canvas.min.js"></script>

    <title>div 2 jpg using html2canvas js library</title>

    <!-- Styling for the result container -->
    <style>
        .result {
            display: none;
        }

        /* Styling for the canvas element */
        canvas {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <!-- Div element that we want to convert to an image -->
    <div class="html">
        <h2>Lorem ipsum dolor sit amet.</h2>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere repudiandae ea libero aspernatur voluptas,
            possimus iste distinctio sed alias cum officiis quo quis iure explicabo, nulla assumenda asperiores
            temporibus commodi. Laudantium libero corrupti nisi ab earum, sunt laborum, deleniti ducimus totam quod,
            deserunt enim consequatur aspernatur soluta nulla eveniet natus!
        </p>
        <button onclick="convert()">Convert me to jpg image</button>
    </div>

    <!-- Container to show the result -->
    <div class="result">
        <!-- Link to download the image -->
        <a href=""><button>Download JPG</button></a>
        <hr>
    </div>

    <!-- Script for converting div to image -->
    <script>
        // Get the div element and the result container
        const div = document.querySelector(".html");
        const result = document.querySelector(".result");
 
        // Function that converts the div to an image
        function convert() {
            html2canvas(div).then(function (canvas) {
                // Add the canvas element to the result container
                result.appendChild(canvas);
                
                // Get the canvas element and convert it to a data URI
                let cvs = document.querySelector("canvas");
                let dataURI = cvs.toDataURL("image/jpeg");
                
                // Get the link element to download the image and update its properties
                let downloadLink = document.querySelector(".result>a");
                downloadLink.href = dataURI;
                downloadLink.download = "div2canvasimage.jpg";
                
                // Log the data URI to the console
                console.log(dataURI);
            });
            
            // Show the result container
            result.style.display = "block";
        }
    </script>
</body>
</html>

Explanation of above code

The HTML document is declared with a <!DOCTYPE html> declaration, and the <html> tag is opened.
The document's language is set to "en" with the lang attribute in the <html> tag.
The document's head section contains various meta tags, including one that sets the document's character encoding to "UTF-8", one that specifies the version of Internet Explorer to use, and one that sets the width of the viewport.
The html2canvas library is included in the document using a script tag that references the CDN link where the library is hosted.
The document's title is set to "div 2 jpg using html2canvas js library".
Some CSS rules are defined in the <style> tag to hide the element with class .result and to add a blue border to any canvas element.
The document's body begins with a div element that has a class of html. Inside this div, there's an h2 tag and a p tag with some Lorem Ipsum text. There's also a button element with an onclick attribute that calls a convert function when clicked.
Below the div with class .html, there's another div with class .result. This div contains an a tag with an empty href attribute and a button element with the text "Download JPG". There's also an hr element that adds a horizontal line to the page.
The script section begins with two variable declarations using const. The div variable is set to the element with class .html, and the result variable is set to the element with class .result.
The convert function is defined. This function uses the html2canvas library to convert the div element with class .html to a canvas element. When the conversion is complete, a callback function is executed, which does the following:
- The resulting canvas element is appended to the result element.
- A new variable cvs is declared and set to the first canvas element on the page.
- A new variable dataURI is declared and set to a string that represents the canvas image data in Base64 format.
- A new variable downloadLink is declared and set to the a element within the .result element.
- The href attribute of the downloadLink element is set to the dataURI string.
- The download attribute of the downloadLink element is set to "div2canvasimage.jpg".
- The dataURI string is logged to the console.
Finally, the result element is displayed by setting its display property to "block".

canvas to image canvas to jpg convert html to canvas convert html to canvas javascript css free-source-code html html to canvas html2canvas javascript

Convert HTML To Canvas | Canvas To Downloadable PNG | JPG Image | html2canvas | JavaScript |

Source Code to Convert HTML to Canvas and Canvas to downloadable png / jpeg image

Explanation of above code

Popular Posts