将画布图像上传到服务器并保存到文件

Question

我想上传一个画布图像并将其保存为 .png 文件在使用 webapi 的服务器上。

我想出了一种将 dataurl 作为字符串上传到服务器的方法。我已经尝试从中制作一个字节 [] 并保存它，但是当我用油漆打开文件时，它告诉我我的文件已损坏。

client:
    var dataURL = canvas.toDataURL('image/png');

Server:
    string strData = postParam.dataURL.Substring("data:image/png;base64,".Length);
    List<byte> src = new List<byte>();

    for (int i = 0; i < strData.Length; i++)
    {
    char c = strData[i];
    byte b = Convert.ToByte(c);
    src.Add(b);
    }

    System.IO.FileStream fs = System.IO.File.Create(@"D:\git\Lens\Lens.Server.UI.HTML5\reports\chartImages\hello.png", 100000, System.IO.FileOptions.None);
                System.IO.BinaryWriter bw = new System.IO.BinaryWriter(fs);
                bw.Write(src.ToArray());

所以我认为我的问题是，图像数据源的 byte[] 甚至是存储在 png 文件中的正确内容，还是我做其他事情。那么如果是这样，我必须正确转换我的字符串，我可能也搞砸了。

Answer 1

你需要解码数据uri的base64字符串部分

string strData = postParam.dataURL.Substring("data:image/png;base64,".Length);
byte[] data = Convert.FromBase64String(strData);