从 iPad 创建画布图像答案

【问题标题】：Creating a canvas image from an iPad从 iPad 创建画布图像
【发布时间】：2019-08-05 15:15:37
【问题描述】：

从 iPad 或其他基于触控的设备发送画布图像时，我的基于画布的签名板不会将图像保存到指定目录。尽管从 Visual Studio 和普通 Windows PC 上的实时网站测试时图像数据发送得非常好，但 iPad 似乎无法通过 JavaScript 函数发送 Base64 代码。

在为该站点创建代表时，我注意到我需要在应用程序甚至能够将图像发送到我的本地计算机之前注释掉 RouteConfig.cs (thanks to Sanjay Sharma) 中的一行。从那以后，我尝试查看是否有任何重定向问题会在 iPad 上工作时导致问题，但我没有发现任何建议。

构建为 ASP.NET Web 窗体站点（Visual C# > Web > 以前的版本），此页面包含一个可用于触摸和桌面界面的画布。用于制作画布的代码（在“Drawpad”中调用）基于此处的代码：

<body data-rsssl="1" onload="DrawPad()">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <input type="hidden" id="imageData" runat="server" class="image-data" />
        <canvas id="myCanvas" width="500" height="100"></canvas>
        <br />
        <asp:Button ID="btnSave" runat="server" Text="Submit" />
    </form>
    <script type="text/javascript" id="jsDraw">
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        // function DrawPad() {...} // see the bullet points for this one

        $("#btnSave").click(function () {
            var image = document.getElementById('myCanvas').toDataURL("image/png");
            image = image.replace('data:image/png;base64,', '');
            $.ajax({
                type: 'POST',
                url: 'Default.aspx/UploadImage',
                data: '{ imageData : "' + image + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            });
        });
    </script>
</body>

然后按下按钮（特别是 btnSave）在 C# 文件中调用它：

public static void UploadImage(string imageData)
{
    using (FileStream fs = new FileStream(@"C:\\Users\\Alex\\Documents\\testpic.png", FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            bw.Write(Convert.FromBase64String(imageData));
            bw.Close();
        }
    }
}

应用应将图像流式传输到预定目录。尽管可以直接访问图像的 Base64 代码，但该过程中的某些东西（无论是 BinaryWriter、FileStream 还是其他东西）导致数据无法写入。因此，在尝试将文件名加载到所需表中时，尝试签署表单并发送图像会导致基于 SQL 的参数错误；因为文件没有被创建，所以没有文件名，因此无法将数据提交到表中，即使有文件名也没有任何回调。

我最好的猜测是，当从 iPad 提交时，某些原因导致 UploadImage() 方法被完全忽略，但我不知道是什么。

【问题讨论】：

标签： javascript c# asp.net html5-canvas touch

【解决方案1】：

问题实际上不是 JavaScript 错误，而是 C# 错误。这是 UploadImage() 应该做的：

public static void UploadImage(string imageData)
{
    var impersonator = new ImpersonationHelper("<domain>", "<username>", "<password>");
    impersonator.StartImpersonating();
    string path = @"\\\\PATH\\TO\\FILE\\DIRECTORY\\";
    if (!Directory.Exists(path)) // creates a new folder if this one doesn't currently exist yet
        Directory.CreateDirectory(path);
    string fileNameWithPath = path + "SIG" + DateTime.Now.ToString("MMddyyyy") + "-" + rand + ".png"; // where rand is randomly-generated elsewhere
    byte[] imageBytes = Convert.FromBase64String(imageData);
    File.WriteAllBytes(fileNameWithPath, imageBytes);
    impersonator.StopImpersonating();
}

代码不应使用 FileWriter，而应将 Base64 字符串拆分为一系列字节，以便无论使用哪个设备发送图像数据，都可以将其写入文件。我已经确认这可以在 iPad 上正常运行。

【讨论】：