I was recently reading an article about converting HTML DIV to image using HTML Canvas. I tried to implement the same thing but when I click on my button, nothing happens.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
<script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/IdStyle.css" rel="stylesheet" />
<title></title>
<style type="text/css">
#content { flex: auto; }
@media screen and (min-width: 1200px) {
#content { width: 100%; }
}
@media screen and (min-width: 360px) and (max-width:640px) {
#content { width: 100%; }
}
#CardBtn { background-color: #145c7c; border-color: #145c7c; font-size: 9pt; color: #fff; margin: 0 auto; min-width: 100px; }
@media print {
body * { visibility: hidden; }
.print-contents, .print-contents * { visibility: visible; }
.print-contents { position: absolute; left: 0px; right: 0px; }
#IDcard { visibility: visible; }
}
.front { width: 220px; height: 350px; background-color: transparent; border-radius: 10px; border: 1px solid #999; margin: 0 auto; }
.back { width: 220px; height: 350px; background-color: white; border-radius: 10px; border: 1px solid #999; margin: 0 auto; margin-top: 2%; }
.dp { width: 95px; position: relative; height: 95px; top: 30px; left: 50%; transform: translate(-50%); border-radius: 5px; border: 0.5px solid #f3f3f4; }
#Image2 { width: auto; height: 100%; }
.header h5 { font-size: 8px; }
.bottom { clear: both; width: 100%; height: 38%; background-color: transparent; border-radius: 10px; text-align: center; }
.bottom h1 { font-size: 15px; position: relative; top: 35%; text-transform: uppercase; }
.bottom h5 { font-size: 9px; position: relative; top: 50px; text-transform: uppercase; }
.image { position: relative; top: 30px; float: right; margin: 0 auto; right: 5px; }
.sign { position: relative; top: 30px; float: left; margin: 0 auto; left: 5px; }
.imgQR { border: 1px solid #f3f3f4; }
.holder { border: 1px solid #f3f3f4; }
.info { font-size: 6px; margin: 10px 10px; margin-top: 6%; text-align: center; line-height: normal; vertical-align: baseline; }
.roundline { height: 10px; width: 100%; background-color: #343339; position: relative; top: 1px; left: 50%; transform: translate(-50%); border-radius: 5px; }
#adminsign { top: -4px; font-size: 4px; }
</style>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
<div id="content" style="font-size: 10pt; width: 100%;">
<div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
<div class="col-sm-5" style="margin: 0 auto;">
<asp:Panel Class="print-contents" ID="pnlContents" runat="server">
<div class="front" runat="server" id="front">
<div class="IDtop">
<div class="row" runat="server" id="header" style="width: 100%; margin-top: 5px;">
<div class="col-2">
<asp:Image ID="Image2" ImageUrl="~/images/logoquive.png" CssClass="idcardimg" AlternateText="logo" runat="server" Height="20" />
</div>
<div class="header col-9">
<div style="text-align: center;">
<h5>
<asp:Label ID="lblName" runat="server" Text="Heritage International Schools"></asp:Label></h5>
</div>
</div>
</div>
<div class="type" id="type" style="text-align: center;">
<asp:Label ID="typelbl" runat="server" Text="STAFF"></asp:Label>
<span style="color: #999;">IDENTITY CARD</span>
</div>
<asp:Image ID="Image1" runat="server" CssClass="dp" />
</div>
<div class="bottom">
<h1>
<asp:Label runat="server" ID="idname" Text="Gabriel Victor Johnson"></asp:Label></h1>
<h5>
<asp:Label runat="server" ID="Designatelbl" Text="Engineering"></asp:Label></h5>
<h5>
<asp:Label runat="server" ID="cardID" Text="008742"></asp:Label></h5>
<br />
<div class="sign">
<asp:Image ID="Image4" runat="server" CssClass="holder" Height="30" BorderStyle="Dashed" />
<p style="font-size: 8pt;">Holder's signature</p>
</div>
<div class="image">
<asp:Image ID="Image3" runat="server" CssClass="imgQR" Height="50" BorderStyle="Solid" />
</div>
</div>
</div>
</asp:Panel>
<asp:HiddenField ID="ImageDatahf" runat="server" />
<asp:Button ID="CardBtn" Text="Save Card" runat="server" CssClass="btn navbar-btn" UseSubmitBehavior="false" OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" />
</div>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
<script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function ConvertToImage(CardBtn) {
html2canvas($("#front")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=ImageDatahf]").val(base64);
__doPostBack(CardBtn.name, "");
});
return false;
}
</script>
</body>
</html>
protected void ExportToImage(object sender, EventArgs e)
{
string base64 = Request.Form[ImageDatahf.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
Response.Clear();
Response.ContentType = "image/png";
Response.AddHeader("Content-Disposition", "attachment; filename=HTML.png");
Response.Buffer = true;
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.BinaryWrite(bytes);
Response.End();
}
