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.

Source Code:

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

<!DOCTYPE html>

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

</head>

<body>

<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>

</div>

</form>

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

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

<br />

<h3> Preview : </h3>

</div>

$(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: