Submit Canvas Data in an HTML Form

Question

How can I submit Canvas content inside a PHP CodeIgniter form? One of the inputs on my form is a Canvas for a drawing or webcam photo.

I created a tag <input name="picture" type="hidden"> and set its value to the base64 content:

myPictureInput.value = canvas.toDataURL();

However, when the user submits the form, the POST value read from the <input> is truncated to 64kb.

Is there an optimal way to post or submit images together with form data?

Answer 1

As mentioned in this answer, you should send the canvas to your server separately, then put your form submit function inside of the done callback.

var dataURL = canvas.toDataURL();
$(function() {
    $(form).submit(function(e) {
          e.preventDefault();
          $.ajax({
              type: "POST",
              url: "script.php",
              data: { 
                 imgBase64: dataURL
              }
         }).done(function(o) {
              console.log('saved image'); 
              $.post(url, form.serialize(), function(data) {
                     console.log('saved form')
              };
    });