从 iPad 创建 canvas 图像

Question

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

在为这个网站创建 reprex 时，我注意到我需要在 RouteConfig.cs (thanks to Sanjay Sharma) 中注释掉一行，然后应用才能将图像发送到我的本地计算机.从那时起，我尝试查看是否存在任何类型的重定向问题，这些问题在使用 iPad 时会导致问题，但我没有发现任何提示。

构建为 ASP.NET Web 表单站点（Visual C# > Web > 以前的版本），此页面包含一个 canvas 可以使用触摸和桌面界面。用于制作 canvas（在 "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 还是其他内容）导致数据无法写入。因此，在尝试将文件名加载到所需的 table 中时，尝试签署表单并发送图像会导致基于 SQL 的参数错误；因为没有创建文件，所以没有文件名，因此无法将数据提交到 table，即使有文件名也没有任何回调。

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

Answer 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 上正常工作。

从 iPad 创建 canvas 图像

Creating a canvas image from an iPad

javascript

c#

asp.net

touch

html5-canvas