Converted HTML DIV to Image outputs low quality image

Question

Hello community, I recently learned how to capture and convert section of web page into image and save into database. But I noticed that the converted image appears blur.  I read something about dpi (dots per inch) in relation to images, but I couldn’t really understand it. Do I have to apply it if I want to get a better image quality, and how can I do that? Is there a way to improve the quality of the image; make it look sharp and clear, just like its original image?

<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" 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=""></asp:Label></h5>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="type" id="type" style="text-align: center;">
                                                <asp:Label ID="typelbl" runat="server" Text="----------"></asp:Label>
                                                <span style="color: #999;">IDENTITY CARD</span>
                                            </div>
                                            <div>
                                                <asp:FileUpload ID="imgupload" runat="server" Style="display: none" />
                                                <asp:Image AlternateText="Upload Photo" ID="dp" runat="server" CssClass="dp" />
                                            </div>
                                        </div>
                                        <div class="bottom">
                                            <h2>
                                                <asp:Label runat="server" ID="idname" Text="Holder's Name"></asp:Label></h2>
                                            <h5>
                                                <asp:Label runat="server" ID="Designatelbl" Text="Title"></asp:Label></h5>
                                            <h5>
                                                <asp:Label runat="server" ID="cardID" Text="ID Number"></asp:Label></h5>
                                            <br />
                                            <div class="sign">
                                                <asp:FileUpload ID="signupload" runat="server" Style="display: none" />
                                                <asp:Image AlternateText="Upload Signature" ID="holder" runat="server" CssClass="holder" Height="30" />
                                                <p style="font-size: 8pt;">Holder's signature</p>
                                            </div>
                                        </div>
                                    </div>

 <asp:HiddenField ID="ImageDatahf" runat="server" />

<div class="btnfront" runat="server" style="margin: 0 auto; width: 100%; margin-top: 5%;">
                                    <asp:Button ID="CardBtn" runat="server" CssClass="btn navbar-btn" Text="Save Card" UseSubmitBehavior="false" OnClick="ConvertBtn_Click" OnClientClick="return ConvertToImage(this)" />
                                </div>
 <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://html2canvas.hertzen.com/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, "");
             });
         }
     </script>

 protected void ConvertBtn_Click(object sender, EventArgs e)
  {
     try
      {
 	    string fileName = Test-IDCARD + ".png";
            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=" + fileName);
            Response.Buffer = true;
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            Response.BinaryWrite(bytes);
            Response.End();
      }
     catch (SqlException ex)
     {
          string msg = "Error:";
          msg += ex.Message;
          throw new Exception(msg); 
     }
 }

Answer 1

Hi @Donald Symmons,
You can scale pictures to improve picture clarity, and you can use existing canvases for rendering. The width and height of the canvas are determined according to the size of the HTML DIV(w and h).

 function ConvertToImage(CardBtn) {
             var w = 1100;
          
             var div = $("#front")[0];
         
             var h = div.offsetHeight;

             var canvas = document.createElement('canvas');
             canvas.width = w * 2;
             canvas.height = h * 2;
             canvas.style.width = w + 'px';
             canvas.style.height = h + 'px';
             var context = canvas.getContext('2d');
             context.scale(2, 2);
             html2canvas(div, { canvas: canvas }).then(function (canvas) {
                 var base64 = canvas.toDataURL();
                 $("[id*=ImageDatahf]").val(base64);
                 __doPostBack(CardBtn.name, "");
             });
         }

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.