We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

Font issue and combine functions[Answered] RSS

1 reply

Last post Jul 31, 2020 07:16 AM by XuDong Peng

‹ Previous Thread|Next Thread ›

Shortcuts

dlchase

Member

361 Points

1581 Posts

Font issue and combine functions

Jul 30, 2020 08:32 PM|dlchase|LINK

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

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.
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.

    <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="position: relative; 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>

DavidInBD

XuDong Peng

Contributor

2400 Points

749 Posts

Re: Font issue and combine functions

Jul 31, 2020 07:16 AM|XuDong Peng|LINK

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="position: relative; 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

ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

‹ Previous Thread|Next Thread ›