ajax POST is driving me nuts. Code seems right but fails on send

Question

I am sending a canvas image using ajax to a php page that will catch it. Console tells me it is failing every time and not even sending. I have double checked everything and still am not seeing the issue. I finally walked away from it for a week and came back to it and for the past few hours I am still not seeing the issue. What am I over looking? The jQuery version on the server is 2.2.4

var dataURL = canvas.toDataURL();
var pngImage = new FormData();
pngImage.append('Image', dataURL);

$.ajax({
  url: 'upload.php',
  method: 'POST',
  dataType : 'text',
  data: pngImage,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data) {
    console.log("sucessful send:");
    console.log(data);
  },
  error: function() {
    console.log('failed');
  }
});

UPDATE: When using

    var Grabcanvas = document.getElementById("signature");
    var ImgData = document.getElementById("Image").value = Grabcanvas.toDataURL();

    var pngImage = new FormData();

    pngImage.append('Image', $('#signature')[0].toDataURL());

    console.log(ImgData); 
    console.log(pngImage);

    $.ajax({
      url: 'upload.php',
      type: 'POST',
      dataType : 'text',
      data: pngImage,
      cache: false,
      contentType: false,
      processData: false,

      success: function(data) {
      console.log("sucessful send:");
      console.log(data);
      },
      error: function(d) {
      console.log('error');
      console.log(d);
      console.log(d.responseText);
      }

var ImgData returns the proper canvas data however var pngImage is empty and returns as FormData { } in the console.

Answer 1

i think because you are not get correct element for pngImage.

dataToURL() i used for native javascript dom, not jquery dom.

this means if id of canvas is #canvas, you should doing this:

var pngImage = new FormData();
        pngImage.append('Image', document.getElementById('canvas').toDataURL());

or in jquery

    pngImage.append('Image', $('canvas')[0].toDataURL());

so our code will be like below:

<canvas id="canvas" width="5" height="5"></canvas>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
    $(function(){
        var pngImage = new FormData();
        pngImage.append('Image', $('#canvas')[0].toDataURL());
        
        $.ajax({
          url: 'upload.php',
          type: 'POST',
          dataType : 'text',
          data: pngImage,
          cache: false,
          contentType: false,
          processData: false,
          success: function(data) {
            console.log("sucessful send:");
            console.log(data);
          },
          error: function(d) {
            console.log('error');
            console.log(d); //show error
            console.log(d.responseText); //show error reponse text
          }
        });
    })
    </script>

php

<?php print_r($_POST);?>

you will see

sucessful send:
Array
(
    [Image] => data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC
)

UPDATE:

sry i need to lunch first ^_^

1. why you cant catch POST using $_POST? because you miss write the syntax, and i copy paste your code without read carefully. (so, this is lucky for me to use $_REQUEST XD)

method: 'POST' => no method named as method in jquery ajax. the right method is type: 'POST' , then you can catch it using $_POST. (try to change to $_GET too for learning)

huft... how can i miss that

2. you want upload image using binary/blob style but your data is actually just string/text. in this case, i really prefer doing this way

.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<canvas id="canvas" width="5" height="5"></canvas>
<script>
$(function(){
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: {Image: $('#canvas')[0].toDataURL()},
      success: function(data) {
        console.log(data);
      },
      error: function(d) {
        console.log('error');
      }
    });
})
</script>

PHP

<?php print_r($_POST);?>

Answer 2

For an example think this is your element,

<canvas id="canvas" width="5" height="5"></canvas>

Now you need to select this element,

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

And

var dataURL = canvas.toDataURL();

Then you can send via Ajax

$.ajax({
   url: 'a.php',
   method: 'POST',
   data: dataURL,
   success: function(data) {
      console.log("sucessful send:");
      console.log(data);
   },
   error: function(d) {
      console.log('error');
      console.log(d); //show error
      console.log(d.responseText); //show error reponse text
   }
});

Answer 3

So for those of you that are having trouble with sending an image from a canvas through AJAX here is an answer. Nobody would give me correct information on here or just wanted to be jerks and keep down voting. I found someone nice enough somewhere else to explain my issue. When the canvas is converted to a dataURL using toDataURL() you have to remove data:image/png;base64, from the dataURL string or it will not send. This was acheived by a simple line which is var png = ImgData.split(',')[1]; The data now sends no problem and can be picked up in PHP and converted no problem. I sincerely hope this helps someone in the future as it caused me a lot of issues getting a CORRECT answer.

var Grabcanvas = document.getElementById("signature");

var ImgData = Grabcanvas.toDataURL();

var png = ImgData.split(',')[1]; //THIS IS WHAT DID IT

$.ajax({
  url: 'upload.php',
  type: 'POST',
  dataType : 'text',
  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  data: {"Image" : png},

  success: function(data) {
  console.log("sucessful send:");
  console.log(data);
  },
  error: function(d) {
  console.log('error');
  console.log(d);
  console.log(d.responseText);
  }