Save high resolution (size:width:1800px, height:1080px) canvas image to server using asp.net

Question

I have this code to save a canvas image to the web server. But it is not working when the image has more than 200*200 pixels and high resolution: it does not save. A small image works; but a larger image with high resolution does not work.

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

I am not sure, but I think this is a configuration issue not a code issue? Take a look at http://stackoverflow.com/questions/29895196/maximum-request-length-exceeded-when-paging-in-large-datagrid?lq=1 — Radio, May 06 '15 at 20:43
(You could use `string fileNameWitPath = Path.Combine(path, DateTime.Now.ToString("yyyy-MM-dd- HHmmss") + ".png"`.) — Andrew Morton, May 06 '15 at 20:44

score 0 · Answer 1 · edited May 23 '17 at 11:43

I'm not sure if this is your situation, but ASP.net has an upload limit of 4mb, maybe the file you are generating is bigger than that.

One way to solve this is to change your web.config's httpRuntime tag:

<httpRuntime maxRequestLength="4096" />

4096 is the default value (4mb), try to increase it to 16mb(16384) for example just to see if it works.

Another very useful option is to use a free upload library such as PlUpload.

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

Save high resolution (size:width:1800px, height:1080px) canvas image to server using asp.net

1 Answers1