Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas | javascript | js

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.

Video Description

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: https://b.codewithsundeep.com/2022/05... html2canvas.js library link : https://html2canvas.hertzen.com You can contact me on , Facebook : https://facebook.com/codewithsundeep Instagram : https://instagram.com/codewithsundeep1 Your Queries : html2canvas, convert html page to image using javascript, convert html table to image javascript,, convert html div to image javascript, convert html to image, convert div to image without canvas, html2image javascript, convert div to image using canvas, convert html div to image javascript, convert html table to image javascript, html2image javascript, how to convert html to canvas, how to convert canvas to image, html to canvas, canvas to image, canvas to image javascript, canvas to image js, canvas to image download, canvas to image file, canvas to image jquery, canvas to image angular, canvas to image url, canvas to image file javascript, canvas to image data, convert canvas to image, photoshop fit canvas to image, html canvas to image, js canvas to image, gimp fit canvas to image, convert canvas to image file javascript, photoshop resize canvas to image, save canvas to image, add canvas to image, tkinter canvas to image, canvas add text to image, canvas html to image, canvas convert to image, canvas save to image, canvas export to image, canvas to base64, canvas to dataurl, canvas fit to image, canvas draw to image, canvas render to image, canvas background to image Hashtag : #html #javascript #canvas #image #html2canvas #canvas2image #canvas_to_image #html_to_canvas #hindi #tutorial #hindi_tutorial #javascript_tutorial #javascripttutorial #convert_html_to_canvas #convert_canvas_to_image #codewithsundeep #code_with_sundeep

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">
   <!-- html2canvas cdn link -->
    <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>
    <style>
        .result {
            display: none;
        }

        canvas {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <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>
    <div class="result">
        <a href=""><button>Download JPG</button>
        </a>
        <hr>

    </div>
    <script>
        const div = document.querySelector(".html");
        const result = document.querySelector(".result");

        function convert() {
            html2canvas(div).then(function (canvas) {
                result.appendChild(canvas);
                let cvs = document.querySelector("canvas");
                let dataURI = cvs.toDataURL("image/jpeg");
                let downloadLink = document.querySelector(".result>a");
                downloadLink.href = dataURI;
                downloadLink.download = "div2canvasimage.jpg";
                console.log(dataURI);
            });
            result.style.display = "block";

        }
    </script>
</body>
</html>

HTML to Canvas CDN Link :
https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
HTML2Canvas CDN Link with script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Html to Canvas main website link https://html2canvas.hertzen.com/

Useful Links

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)