Covert DIV to Image and send as email attachment using C# and VB.Net in ASP.Net

nauna
 
on Oct 07, 2021 12:32 AM
Sample_205271.zip
632 Views

hello,

i have this html on click event it covert div data to image and download it

I want on instead of download on click event 

1. it coverts div data to image

2. then send that image as attachment on email

<div class="cube-card-wrapper" id="dvTable">some data here</div>
<asp:Button ID="btnExport" Text="Export Certificate" runat="server" UseSubmitBehavior="false"
    OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" CssClass="green-bg white-c btn" />
<asp:HiddenField ID="hfImageData" runat="server" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    function ConvertToImage(btnExport) {
        html2canvas($('[id*=dvTable]')[0], {
            onrendered: function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            }
        });
        return false;
    }
</script>

 

protected void ExportToImage(object sender, EventArgs e)
{
    string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
    byte[] bytes = Convert.FromBase64String(base64);
    Response.Clear();
    Response.ContentType = "image/png";
    Response.AddHeader("Content-Disposition", "attachment; filename=" + "name" + ".png");
    Response.Buffer = true;
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.BinaryWrite(bytes);
    Response.End();
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 07, 2021 04:46 AM

Hi nauna,

Refer below example.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    function ConvertToImage(btnExport) {
        html2canvas($('[id*=dvTable]')[0], {
            onrendered: function (canvas) {
                var base64 = canvas.toDataURL();
                $("[id*=hfImageData]").val(base64);
                __doPostBack(btnExport.name, "");
            }
        });
        return false;
    }
</script>
<div class="cube-card-wrapper" id="dvTable">
    some data here
</div>
<asp:Button ID="btnExport" Text="Export Certificate" runat="server" UseSubmitBehavior="false"
    OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" CssClass="green-bg white-c btn" />
<asp:HiddenField ID="hfImageData" runat="server" />

Namespaces

C#

using System.IO;
using System.Net;
using System.Net.Mail;

VB.Net

Imports System.IO
Imports System.Net
Imports System.Net.Mail

Code

C#

protected void ExportToImage(object sender, EventArgs e)
{
    string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
    byte[] bytes = Convert.FromBase64String(base64);
    MailMessage mm = new MailMessage("sender@gmail.com", "receiver@gmail.com");
    mm.Subject = "Div Image";
    mm.Body = "Image Attachment";
    mm.Attachments.Add(new Attachment(new MemoryStream(bytes), "name.png"));
    mm.IsBodyHtml = true;
    SmtpClient smtp = new SmtpClient();
    smtp.Host = "smtp.gmail.com";
    smtp.EnableSsl = true;
    NetworkCredential NetworkCred = new NetworkCredential();
    NetworkCred.UserName = "sender@gmail.com";
    NetworkCred.Password = "<password>";
    smtp.UseDefaultCredentials = true;
    smtp.Credentials = NetworkCred;
    smtp.Port = 587;
    smtp.Send(mm);
}

VB.Net

Protected Sub ExportToImage(ByVal sender As Object, ByVal e As EventArgs)
    Dim base64 As String = Request.Form(hfImageData.UniqueID).Split(","c)(1)
    Dim bytes As Byte() = Convert.FromBase64String(base64)
    Dim mm As MailMessage = New MailMessage("sender@gmail.com", "receiver@gmail.com")
    mm.Subject = "Div Image"
    mm.Body = "Image Attachment"
    mm.Attachments.Add(New Attachment(New MemoryStream(bytes), "name.png"))
    mm.IsBodyHtml = True
    Dim smtp As SmtpClient = New SmtpClient()
    smtp.Host = "smtp.gmail.com"
    smtp.EnableSsl = True
    Dim NetworkCred As NetworkCredential = New NetworkCredential()
    NetworkCred.UserName = "sender@gmail.com"
    NetworkCred.Password = "<password>"
    smtp.UseDefaultCredentials = True
    smtp.Credentials = NetworkCred
    smtp.Port = 587
    smtp.Send(mm)
End Sub