How to send form variables and canvas picture to php server?

Question

I want to send to a php file (which is in charge of acting like a server) some form variables and a canvas image using the method POST. Everything must be done by pressing a button. Here is my JS code snippet which only works for form variables but not for the canvas pic.

var create = document.getElementById('create');

create.addEventListener('click', function () {
  var dataURL = canvas.toDataURL();
  $.ajax({
    type: "POST",
    url: "parameters.php",
    data: { 
    imgBase64: dataURL
    }
  });
}

Does anyone know why the canvas picture is not sent to the parameters.php file?

when I print the count($_POST) variable, the number shown is matching with the number of form parameters — Napoleone Capasso, Apr 24 '20 at 13:41
How do you know "_the canvas picture is not sent to the parameters.php file_"? — Teemu, Apr 24 '20 at 13:41
@Teemu when I print the count($_POST) variable, the number shown is matching with the number of form parameters. So one number less than expected — Napoleone Capasso, Apr 24 '20 at 13:43
Now I'm confused ... Which form, there's no form used in the AJAX call in the example, the only parameter is the data you pass with the AJAX. I can only assume, that you've a form, and when submitting the form, also this AJAX function is run. However, the form is submitted, and your server responses with a new page, which the browser loads, and the AJAX will be aborted. — Teemu, Apr 24 '20 at 13:43
I would assume your $_POST param contains key 'imgBase64' with the dataURL as it's value. Is this not what you've received? Try print_r-ing your $_POST. — Gavin, Apr 24 '20 at 13:43
@Teemu ok I will explain you better, sorry if you got confused. I have a form where the user puts his ows name, surname and so on PLUS a canvas pic that he has to draw. (everything is in the
field) Now, when the user clicks on the button, the JS code I sent above is triggered. Everything is sent to the php file, the canvas pic is sent by ajax instead. The only problem is that by printing (on the php file) the number of parameters received with the post, it is equal to the number that the user writes (so the canvas pic is not counted). Hope it is clearer now — Napoleone Capasso, Apr 24 '20 at 13:48
Yes, exactly like I've assumed, the form is submitted, and the AJAX call is aborted. Either put the dataURL to a hidden field of the form, or post the form also with AJAX using jQuery's serialization. — Teemu, Apr 24 '20 at 13:50
In that click handler. Manipulate the form and that's it, or prevent the submission, and post the form using AJAX. — Teemu, Apr 24 '20 at 13:57
Does this answer your question? [How to save an HTML5 Canvas as an image on a server?](https://stackoverflow.com/questions/13198131/how-to-save-an-html5-canvas-as-an-image-on-a-server) — Tito, Apr 24 '20 at 14:22

Shahstewart · Answer 1 · 2020-04-25T21:43:09.920

Your code seems to have a syntax error. The closing bracket for create.addEventListener is missing. I closed that and tried, your code works for me.

I see the following being posted to PHP in my example:

imgBase64: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAD0lEQVQYV2NkwAIYaSAIAAGkAAa+Ds1zAAAAAElFTkSuQmCC

Here is the complete solution that works in chrome:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script
            src="https://code.jquery.com/jquery-3.5.0.min.js"
            integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
            crossorigin="anonymous"></script>
</head>
<body>
<canvas id="canvas" width="5" height="5"></canvas>
<button id="create">CREATE</button>

<script>
    var create = document.getElementById('create');

    create.addEventListener('click', function () {
        var dataURL = canvas.toDataURL();
        console.log(dataURL);
        $.ajax({
            type: "POST",
            url: "params.php",
            data: {
                imgBase64: dataURL
            }
        });
    });
</script>

</body>
</html>

How to send form variables and canvas picture to php server?

1 Answers1