保存HTML 5画布图像在服务器上使用ASP.NET [英] Saving HTML 5 Canvas as Image on the server using ASP.NET

问题描述

我需要一些帮助在这里..

我试着拉后保存画布图像。

下面这个例子中（<一个href=\"http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx\">http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx)

  $（＃btnSave）。点击（函数（）{    VAR图像=的document.getElementById（画布上）toDataURL（图像/ PNG）;
    图像= image.replace（数据：图像/ PNG; BASE64，'，''）;    $阿贾克斯（{
        输入：POST，
        网址：../../Home/Uplo​​adImage?imageData=+图像，
        的contentType：应用/ JSON的;字符集= UTF-8，
        数据类型：JSON，
        成功：函数（MSG）{
            警报（图像保存成功！'）;
        }
    }）;
}）;
 

控制器：

 公共无效UploadImage（字符串为imageData）
{
    串fileNameWitPath =路径+ DateTime.Now.ToString（）替换（/， - ）替换（， - ）.Replace（：，）+.PNG。
    使用（的FileStream FS =新的FileStream（fileNameWitPath，FileMode.Create））
    {
        使用（BW的BinaryWriter =新的BinaryWriter（FS））
        {
            字节[]数据= Convert.FromBase64String（为imageData）;
            bw.Write（数据）;
            bw.Close（）;
        }
    }
}
 

但是，当我尝试转换形式采用base64是在方法中传递的参数一样串，抛出一个错误

  

对于字符数组长度无效的Base-64。

解决方案

您不能发布与查询字符串参数数据

试试这个;

  $（＃btnSave）。点击（函数（）{        VAR图像=的document.getElementById（画布上）toDataURL（图像/ PNG）;
        图像= image.replace（数据：图像/ PNG; BASE64，'，''）;        $阿贾克斯（{
            输入：POST，
            网址：../../Home/Uplo​​adImage
            数据：{为imageData：'+图像+'}
            的contentType：应用/ JSON的;字符集= UTF-8，
            数据类型：JSON，
            成功：函数（MSG）{
                警报（图像保存成功！'）;
            }
        }）;
    }）;
 

I need some help here..

Im trying to save a canvas image after drawing..

following this example (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 !');
        }
    });
});

the controller:

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();
        }
    }
}

But when im trying to convert form base64 the string that is passed like parameter in method, throw an error

Invalid length for a character array Base-64.

解决方案

You can't post data with querystring parameters

Try this;

    $("#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 !');
            }
        });
    });

这篇关于保存HTML 5画布图像在服务器上使用ASP.NET的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！