locked
Font issue and combine functions RRS feed

  • Question

  • User1510859543 posted

    We have 2 issues that we need to resolve on one of our aspx webforms pages.  The affected markup and JavaScript is below.

    1. When we type text into the text input element on a desktop the text shows as a script font and is perfect. However, when I use Chrome browser in Android phone the text is no longer script but plain text.
    2.  I would like to make the savePngToServer() a single function so that the script text is both placed in the img control and also saved to the server.  If I run the textToPng() function first, then the savePngToServer() it works perfectly.  I tried placing textToPng(); in first line of savePngToServer() but it did not work as it saved an empty png file.
    3.     <asp:Panel ID="PanelSignature" runat="server" CssClass="hide" ClientIDMode="Static">
              <div id="scriptype">
                  <input id="scriptname" type="text" style="border-color: #FFFFFF; font-family: 'Segoe Script'; font-size: 24px; width: 300px" class="hide" />
              </div>
              <div id="canvas">
                <canvas class="" id="SigCnv"
                  style="; margin: 0; padding: 0; border: 1px solid #c4caac;">
                </canvas>
              </div>
              <script type="text/javascript">
                  signatureCapture();
              </script>
              <asp:Button ID="BtnSaveSignature" runat="server" Text="Save signature" UseSubmitBehavior="False" ClientIDMode="Static" />
              <asp:Button ID="BtnClearSignature" runat="server" Text="Clear signature" OnClientClick="return signatureClear();" ClientIDMode="Static" />
              <input type="button" onclick="textToPng()" value="Save" />
              <asp:Button ID="BtnSaveImage" runat="server" Text="Save signature" CssClass="" OnClientClick="savePngToServer();" UseSubmitBehavior="False" />
              <div>
                  png --&gt;<img id="imgScreenshot" src="">
              </div>
      
          </asp:Panel>
      
          <script type="text/javascript">
      
             function textToPng() {
                  html2canvas(document.getElementById("scriptname"), {
                      onrendered: function (canvas) {
                          var screenshot = canvas.toDataURL("image/png");
                          document.getElementById("imgScreenshot").setAttribute("src", screenshot);
      
                          const a = document.createElement("a");
                          a.style.display = "none";
                          document.body.appendChild(a);
      
                          a.setAttribute("href", screenshot);
                          // Use download attribute to set set desired file name
                          a.setAttribute("download", "TextToPNG");
      
                          // Trigger the download by simulating click
                          a.click();
                          document.body.removeChild(a);
                      }
                  });
              }
      
              function savePngToServer() {
                  var vpath = document.getElementById('txtPhotoPath').value;
                  var image = document.getElementById("imgScreenshot").src;
                  image = image.replace('data:image/png;base64,', '');
                  $.ajax({
                      type: 'POST',
                      url: 'SaveSignature.aspx/SaveImage',
                      data: JSON.stringify({ 
                              imageData : image,
                              strSavePath: vpath
                          }),
                      contentType: 'application/json; charset=utf-8',
                      dataType: 'json',
                      success: function (msg) {
                          alert('Image saved successfully !');
                      }
                  });
                  //refresh page to get new signature
                  __doPostBack('BtnSaveImage', 'Click');
              }
      
          </script>
      
    Thursday, July 30, 2020 8:32 PM

Answers

  • User-939850651 posted

    Hi dlchase,

    First question: This means that you are developing a mobile website. Do you add the required meta tags to it?

    Please refer to the answer in the case below:

    CSS Font-size not working properly on mobile device

    The second question: If you want to merge these two functions into one, you can call the savePngToServer() function in the onrendered callback function, or you can add a hard code at the end.

    Something like this:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Panel ID="PanelSignature" runat="server" CssClass="hide" ClientIDMode="Static">
                    <div id="scriptype">
                        <input id="scriptname" type="text" style="border-color: #FFFFFF; font-family: 'Segoe Script'; font-size: 24px; width: 300px" class="hide" />
                    </div>
                    <div id="canvas">
                        <canvas class="" id="SigCnv"
                            style="; margin: 0; padding: 0; border: 1px solid #c4caac;"></canvas>
                    </div>
    
                    <%--<asp:Button ID="BtnSaveSignature" runat="server" Text="Save signature" UseSubmitBehavior="False" ClientIDMode="Static" />--%>
                    <asp:Button ID="BtnClearSignature" runat="server" Text="Clear signature" OnClientClick="return signatureClear();" ClientIDMode="Static" />
                    <input type="button" onclick="textToPng()" value="Save" />
                    <asp:Button ID="BtnSaveImage" runat="server" Text="Save signature" CssClass="" OnClientClick="savePngToServer();" UseSubmitBehavior="False" />
                    <div>
                        png --&gt;<img id="imgScreenshot" src="" />
                    </div>
    
                </asp:Panel>
            </div>
        </form>
    </body>
    <script src="Scripts/jquery-1.11.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script type="text/javascript">
        function signatureCapture() {
            console.log('clear the text box');
        }
    </script>
    <script type="text/javascript">
    
        function textToPng() {
            html2canvas(document.getElementById("scriptname"), {
                onrendered: function (canvas) {
                    var screenshot = canvas.toDataURL("image/png");
                    //document.getElementById("imgScreenshot").setAttribute("src", screenshot);
                    $('#imgScreenshot').attr('src', screenshot);
                    const a = document.createElement("a");
                    a.style.display = "none";
                    document.body.appendChild(a);
    
                    a.setAttribute("href", screenshot);
                    // Use download attribute to set set desired file name
                    a.setAttribute("download", "TextToPNG");
                    
                    // Trigger the download by simulating click
                    a.click();
                    document.body.removeChild(a);
                    savePngToServer();
                }
            });
        }
    
        function savePngToServer() {
            //var vpath = document.getElementById('txtPhotoPath').value;
            var vpath = '~/png/test.png';
            var image = document.getElementById("imgScreenshot").src;
            image = image.replace('data:image/png;base64,', '');
            $.ajax({
                type: 'POST',
                url: 'WebForm1.aspx/SaveImage',
                data: JSON.stringify({
                    imageData: image,
                    strSavePath: vpath
                }),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert('Image saved successfully !');
                }
            });
            //refresh page to get new signature
            //__doPostBack('BtnSaveImage', 'Click');
        }
    </script>
    </html>
    
    [WebMethod]
            public static void SaveImage(string imageData, string strSavePath)  {
                byte[] imageBytes = Convert.FromBase64String(imageData);
                //Save the Byte Array as Image File.
                Image saveImage;
                using (MemoryStream ms = new MemoryStream(imageBytes))
                {
                    saveImage = Image.FromStream(ms);
                }
                string path = HttpContext.Current.Server.MapPath(strSavePath);
                saveImage.Save(path);
            }

    Result:

    Hope this can help you.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 31, 2020 7:16 AM