Is it possible to convert div container to Image and at the same time download the converted image div as PDF? I tried to apply an idea from the code I have which converts HTML elements (including Image) to PDF, but it did not work. I believe there are several things I need to learn on this, which is why I came here for help and ideas on how this can be done successfully. Thank you

HTML, CSS and Javascript

<style type="text/css"> 
    #Image1 {
            position: absolute;
            left: 20px;
            top: 20px;
            cursor: move;
            background-color: #fafafa;
            border: solid 1px #00003D;
            font-size: 24px;
            text-align: center;
            backface-visibility: hidden;
            background: unset;
            height: 80px;
            width: 80px;
        }
 /* canvas container */
        .contentt {
            max-width: 100%;
            position: relative;
            margin: auto;
            height: auto;
            margin-top: 0%;
            /*text-align: center;*/
        }
        #dvContainer {
            position: relative;
            border-radius: 5px;
            border: none;
            width: 100%;
            height: 100%;
        }
</style>

<div class="contentt" style="width: 100%; margin: 0 auto;">
   <asp:Panel Class="print-contents" ID="Panel1" runat="server">
       <div id="dvContainer" runat="server" style="border: 0.5px solid #e4e7e8;"></div>
       <asp:Image ID="Image1" runat="server" BorderStyle="None" Width="80px" Height="80px" />
   </asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
</div>

<asp:Button ID="Button1" runat="server" CssClass="btn navbar-btn" Text="Download(PDF)" UseSubmitBehavior="false" OnClick="ConvertDivToImageToPDF_Click" OnClientClick="return DownloadToPDF(this)" />

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
 <script type="text/javascript">
    function DownloadToPDF(Button1) {
      html2canvas($("#Panel1")[0]).then(function (canvas) {
        var base64 = canvas.toDataURL();
        $("[id*=HiddenField1]").val(base64);
         __doPostBack(Button1.name, "");
       });
       return false;
    }
</script>

Code

protected void ConvertDivToImageToPDF_Click(object sender, EventArgs e)
{
    string base64 = Request.Form[HiddenField1.UniqueID].Split(',')[1];
    byte[] bytes = Convert.FromBase64String(base64);
    //saving the converted image first, as file to root folder
    File.WriteAllBytes(Server.MapPath("Doc.jpg"), bytes);
    // setting absolute url for the converted image.
    //In the below two lines, I don't know what control ID that can be used to call the converted HTML DIV to Image.
   // Image1.ImageUrl = GetUrl("Doc.jpg");
   // hfbackCard.UniqueID = GetUrl("Doc.jpg");
 
    var ImgUrl = Image1.ImageUrl;
    StringWriter sw = new StringWriter();
    HtmlTextWriter hw = new HtmlTextWriter(sw);
    Panel1.RenderControl(hw);
    StringReader sr = new StringReader(sw.ToString());
    Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 10f);
    PdfWriter PdfWriter = PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
    HtmlPipelineContext htmlContext = new HtmlPipelineContext(null);
    htmlContext.SetTagFactory(Tags.GetHtmlTagProcessorFactory());
    ICSSResolver cssResolver = XMLWorkerHelper.GetInstance().GetDefaultCssResolver(false);
    cssResolver.AddCssFile(Server.MapPath("~/css/style2.css"), true);
    IPipeline pipeline = new CssResolverPipeline(cssResolver, new HtmlPipeline(htmlContext, new PdfWriterPipeline(pdfDoc, PdfWriter)));
    var worker = new XMLWorker(pipeline, true);
    var xmlParse = new XMLParser(true, worker);
    pdfDoc.Open();
    xmlParse.Parse(sr);
    xmlParse.Flush();
    pdfDoc.Close();
    Response.ContentType = "application/pdf";
    Response.AddHeader("content-disposition", "attachment;filename= Doc.pdf");
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Write(pdfDoc);
    // After converting to PDF, Delete the image from the root folder.
    File.Delete(Server.MapPath("Doc.jpg"));
    Response.End();
}
 
public string GetUrl(string imagepath)
{
    string[] splits = Request.Url.AbsoluteUri.Split('/');
    if (splits.Length >= 2)
    {
        string url = splits[0] + "//";
        for (int i = 2; i < splits.Length - 1; i++)
        {
            url += splits[i];
            url += "/";
        }
        return url + imagepath;
    }
    return imagepath;
}