使用asp.net将高分辨率(大小:宽度:1800px,高度:1080px)画布图像保存到服务器

时间:2015-05-06 20:32:25

标签: javascript asp.net canvas

我有这个代码将画布图像保存到Web服务器。但是当图像具有超过200 * 200像素和高分辨率时它不起作用:它不能保存。小图片有效;但是高分辨率的大图像不起作用。

<script type="text/Javascript">
        function drawShapes() {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var imageObj = new Image();
            imageObj.src = "im.jpg";
            imageObj.onload = function () {
                context.drawImage(imageObj, 0, 0, 1800, 1080);
            }
        }

    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#TZ").click(function () {
                var image = document.getElementById("myCanvas").toDataURL("image/png");
                image = image.replace('data:image/png;base64,', '');
                $.ajax({
                    type: 'POST',
                    url: 'Include/CS.aspx/UploadImage',
                    data: '{ "imageData" : "' + image + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    /*success: function (msg) {
                        alert('Image saved successfully !');
                    }*/
                });
            });
        });
    </script>



<body onload="drawShapes()">
    <form id="form1" runat="server">
        <div>
            <canvas id="myCanvas" width="1800" height="1080"></canvas>
            <a id="TZ">Save</a>
        </div>
    </form>
</body>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;

[ScriptService]

public partial class Include_CS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod()]
    public static void UploadImage(string imageData)
    {
        string path = System.Web.Hosting.HostingEnvironment.MapPath("~/Images/");
        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();
            }
        }
    }
}

1 个答案:

答案 0 :(得分:0)

我不确定这是不是你的情况,但ASP.net的上传限制为4mb,也许你生成的文件大于此。

解决此问题的一种方法是更改​​web.config的httpRuntime标记:

<httpRuntime maxRequestLength="4096" />

4096是默认值(4mb),尝试将其增加到16mb(16384),例如只是为了查看它是否有效。

另一个非常有用的选择是使用免费上传库,例如PlUpload

Here's an very good example of its implementation on C# and ASP.Net