从 Canvas 获取图像数据后，通过 ajax 将 uint8clampedarray 数组发送到 javaScript 中的 c#答案

【问题标题】：Sending uint8clampedarray Array via ajax to c# in javaScript after getImageData from Canvas从 Canvas 获取图像数据后，通过 ajax 将 uint8clampedarray 数组发送到 javaScript 中的 c#
【发布时间】：2019-11-19 13:21:25
【问题描述】：

我在javaScript 的客户端创建一个签名，然后尝试通过ajax 将结果发送到后面的代码(c#)。我试图传递的结果数组是uint8clampedarray 类型的，我做不到，方法后面的代码永远不会被命中。它击中的是 Page Load 方法，而不是 SetSignature 方法。

javaScript

var signatureByteArray = signature.getSignatureImage();
    SendArrayViaAjax(signatureByteArray);

function getSignatureImage() {
    return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
}

function SendArrayViaAjax(signatureArray) {
    var sigArray = JSON.stringify( signatureArray);
        $.ajax({
            type: "POST",
            data: { array: sigArray },
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "/Intranet/OHS/SOP/SOPSignOffs.aspx/SetSignature",
            success: function (msg) {
                alert(msg.d + "success");
            },
            error: function (response) {
                alert("an error has taken place");
            }
    });
}

背后的代码

[WebMethod]
public static string SetSignature(string[] array)
{
    var x = array[2];
    return "success";
}

我的问题是如何通过 ajax 以 uint8clampedarray 的形式发送数组以及如何在 c# 中检索它？还是有更好的办法？

ctx = canvas.getContext("2d");`

是我获取Canvas 元素的方式。 w 签名的生成效果很好，只是将其发送回C#，这就是问题所在。

【问题讨论】：

如果您查看开发者控制台 -> 网络选项卡，您会遇到什么错误？
@Santi 我已经改变了我的问题。没有错误，只是没有点击该方法，但点击了页面加载方法
@Santi 我在下面发布了一个可行的解决方案。谢谢

标签： javascript c# arrays ajax canvas

【解决方案1】：

我找到的解决方案是生成不同的画布图像数据（旧方式）。

以不同方式生成图像

function getSignatureImage() {
    //return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    var pic = canvas.toDataURL("image/png");
    pic = pic.replace(/^data:image\/(png|jpg);base64,/, "")
    return pic;
}

然后在 ajax 函数

$.ajax({
    type: "POST",
    data: '{"imageData" : "'+ signatureImage + '" }',
    ....

然后在后面的代码

public static string SetSignature(string imageData)
{
    string filePath = HttpContext.Current.Server.MapPath("Signature.png");
    using (FileStream fs = new FileStream(filePath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(imageData);
            bw.Write(data);
            bw.Close();
        }
    }
}

【讨论】：