HTML5 Canvas toDataURL("image/png") works on some paintings and some not, not sure why

Question

I'm using asp.net 4 (c#). I have a drawing app on an Html 5 canvas, with ability to add images and to draw with many colors. I would like to save the image drawen to .png file. In order to do that, I've built a WebMethod:

[WebMethod(EnableSession = true)]
public static void UploadImage(string imageData,string name)
{
    System.Diagnostics.Debug.WriteLine("here friend!");
}

Now I have a button on the page, and I use javaScript to call this method:

function trySend()
{
    var image = document.getElementById("drawCanvas").toDataURL("image/png");
    image = image.replace('data:image/png;base64,', '');
    var name = document.getElementById("userName").value;
    $.ajax(
    {
        type: 'POST',
        url: 'CanvasSave.aspx/UploadImage',
        data: '{ "imageData" : "' + image + '" ' + ', "name" : "' + name + '"}',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
        location.href = '<%= Page.ResolveUrl("~/ShowCards.aspx") %>';
        }
     });
}

The thing is, that if I draw a simple drawing on the canvas (some lines or a small circle) it works perfectley. Even If I had 1 of the "stamps" (which are images), it still works.

If I draw a "complicated" image (not really complicated! just a scratch with different colors) or add 2,3 stamps it dosen't work. The WebMethod is not called at all , even If I wait for a long while.

I think that it has to do something with the size of the image. It seems that if the final size of the data less the 80 kb (this is the max size of the image I was able to save) then it works, but if the intended image will be larger than this I have a problem. Again, the all problem is in the JS not in the C# code.

THis is the JavaScript Error i get:

    POST http://localhost:53751/CanvasSave.aspx/UploadImage 500 (Internal Server Error) 
jquery.min.js:4
f.support.ajax.f.ajaxTransport.send jquery.min.js:4
f.extend.ajax jquery.min.js:4
trySend Default.aspx:21
onclick

What is the reason for this problem and how can I fix it?

What is your max post size limit on your server? from my research it seems there is a default limit of 2MB on a default IIS server *(which Base64 encoding could happily surpass)*. http://bytes.com/topic/asp-classic/answers/541920-maximum-size-post-data. I don't usually use Windows-based servers or ASP. but it sounds like that's where your problem will lie. — Pebbl, Aug 30 '12 at 13:05
can I cahnge that? or shrink the image? and I only got to 80kb per image,no image latger than that was saved on my server — Programer, Aug 30 '12 at 13:09
its probably the limit on the post size, but check the event viewer to see detailed the error you get because this 500 is a general one. — Aristos, Aug 30 '12 at 13:15
This probably is not the issue, but is there any chance that one or more of your stamp images are cross-origin? Adding a cross-origin image to a canvas sets the `origin-clean` flag of the canvas to `false`, which makes the browser block calls to `toDataURL`. — apsillers, Aug 30 '12 at 13:17
"Message":"Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property — Programer, Aug 30 '12 at 13:22

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

As I state in my comment, I'm not an ASP/Windows guy - I'm sure others here can clarify, but from what I've read online you need to do the following on your server:

Add the following to your web.config or mod the settings in the machine.config

<system.web>
  <httpRuntime maxRequestLength="XXXXXX" />
</system.web>

The above should alter the max size allowed for any request, I would assume the XXXXX value needs to be given in bytes. Now whether that is the only config setting to change will remain to be seen. PHP has two settings that need to be changed with regard to upload and post limits.

Edit

In order to alter maxJsonLength you need to add the following to your web.config file on the server:

<system.web.extensions>
  <scripting>
    <webServices>
      <jsonSerialization maxJsonLength="5000000">
      </jsonSerialization>
    </webServices>
  </scripting>
</system.web.extensions>

I can't find clarity on what is the default maxJsonLength, some say it's 2097152 chars, and others say 102400 characters... whichever, 5000000 should be enough :)

The following could be useful in regard to finding out what your maxJsonLength currently is:

Confusion over maxJsonLength default value

Ah, it seems you've found the problem with regard to `maxJsonLength`... I would assume you could change this setting in much the same way as my post above for `maxRequestLength`. — Pebbl, Aug 30 '12 at 13:26
Ah nope... I was wrong :) http://geekswithblogs.net/frankw/archive/2008/08/05/how-to-configure-maxjsonlength-in-asp.net-ajax-applications.aspx. I'll update my answer. — Pebbl, Aug 30 '12 at 13:28
the maxJsonLength is 2147483644. Thanks I just figured it out! — Programer, Aug 30 '12 at 13:44

HTML5 Canvas toDataURL("image/png") works on some paintings and some not, not sure why

1 Answers1