21

ここで助けが必要です。

描画後にキャンバス画像を保存しようとしています。

この例に従います（http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx）

$("#btnSave").click(function () {

    var image = document.getElementById("canvas").toDataURL("image/png");
    image = image.replace('data:image/png;base64,', '');

    $.ajax({
        type: 'POST',
        url: "../../Home/UploadImage?imageData=" + image,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            alert('Image saved successfully !');
        }
    });
});

コントローラ：

public void UploadImage(string imageData)
{
    string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
    using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(imageData);
            bw.Write(data);
            bw.Close();
        }
    }
}

しかし、メソッドのパラメータのように渡される文字列をbase64から変換しようとすると、エラーがスローされます

文字配列Base-64の長さが無効です。

4

3 に答える 3

23

クエリ文字列パラメーターを使用してデータを投稿することはできません

これを試して;

    $("#btnSave").click(function () {

        var image = document.getElementById("canvas").toDataURL("image/png");
        image = image.replace('data:image/png;base64,', '');

        $.ajax({
            type: 'POST',
            url: "../../Home/UploadImage",
            data: '{ "imageData" : "' + image + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });
    });
于 2012-05-29T07:47:15.757 に答える
-3

これの代わりに

image = image.replace('data:image/png;base64,', '');

これを使って：

image = image.substr(23, image.length);

先頭の文字を最初のコンマまで削除します (投稿した内容を確認するには、任意の開発ツールを使用してください)。

于 2013-07-18T09:07:35.520 に答える