How to convert div into an image using JQuery

In this article, we learn how to preview HTML div into an image, for this we need to import two JavaScript file  html2canvas.js and jquery.min.js .when the user click the Preview button, the div element get a picture printed on canvas and then downloaded to the local drive as picture using client-side JQuery. 

How to convert div into an image using JQuery

Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="bitmapimage.aspx.cs" Inherits="bitmapimage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>How to convert div into image using JQuery</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div id="html-content-holder1" style="width: 350px;">

            <h3>How to convert div into image using JQuery</h3>

            <p>In this article, we learn how to preview html div into image ,

                for this we need to import two JavaScript file 

                html2canvas.js and jquery.min.js </p>

            <img src="biimg/img1 (2).jpg" />

        </div>

    </form>

    <a id="btn-Preview-Image" href="#">Preview</a>

    <a id="btn-Convert-Html2Image" href="#">Download</a>

    <br />

    <h3> Preview : </h3>

    <div id="previewImage">

    </div>

    <script type="text/javascript">

        $(document).ready(function () {

            var element = $("#html-content-holder1");

            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>

</body>

</html>

 

Live demo:

How to convert div into an image using JQuery

In this article, we learn how to preview HTML div into image, for this, we need to import two JavaScript files html2canvas.js and jquery.min.js



Preview Download

Preview :

 

 

 

How to convert div into an image using JQuery  How to convert div into an image using JQuery Reviewed by NEERAJ SRIVASTAVA on 4:07:00 PM Rating: 5

No comments:

Powered by Blogger.