/Javascript/jQuery/Convert div to image and download jquery

Convert div to image and download jquery

<html><head>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script></head><body style="border: 1px solid #808080; width: 550px; height: 350px">    <div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;">        <strong>infinetsoft tutorials</strong><hr />        <h3 style="color: #3e4b51;">convert html tocanvas         </h3>        <p style="color: #3e4b51;">            Lorem ipsum dolor sit amet,consectetur adipiscing elit. In scelerisque egestas leo, vel congue maurismattis in. Curabitur quis massa ut metus interdum vehicula in vel massa. Nam miquam, venenatis sit amet libero at, vehicula rutrum nisi. In at aliquam metus.Class aptent taciti sociosqu ad litora torquent per conubia nostra, perinceptos himenaeos. Praesent eget quam laoreet, consequat lacus eget,condimentum neque. Aenean ut vehicula mi, et dictum quam. Integer elementumerat vel sagittis faucibus. Aliquam aliquam, ante et iaculis facilisis, nequeelit tempus neque, et lobortis urna velit porttitor nunc. In rutrum mi sit ametneque porta scelerisque. Pellentesque elementum sapien posuere arcu tinciduntornare. Nullam sed hendrerit nisl. Suspendisse at eros augue. Curabitur tempora lacus nec cursus.        </p>    </div>    <a id="btn-Convert-Html2Image" href="#">convertto image</a>    <script>        $(document).ready(function () {            var element = $("#html-content-holder"); // global variable            var getCanvas; //global variable            html2canvas(element, {                onrendered: function (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", "your_image.png").attr("href", newData);            });        });    </script></body></html>

Source: infinetsoft.com

Similar codes

6 votes161 views2 answers
On click fade out jquery
Javascript jQuery
1 vote149 views1 answer
Jquery transform scale
Javascript jQuery
1 vote113 views2 answers
Get jquery data
Javascript jQuery
23 votes195 views1 answer
JQuery create div element
Javascript jQuery
0 vote143 views1 answer
Bind jquery trough name
Javascript jQuery
2 votes162 views2 answers
Jquery visible
Javascript jQuery
19 votes167 views6 answers
Jquery selected option
Javascript jQuery
7 votes148 views3 answers
Check radio button is checked jquery
Javascript jQuery
-1 vote141 views1 answer
Jquery equivalent of document.getelementbyid
Javascript jQuery
2 votes144 views1 answer
Class loop jquery
Javascript jQuery