带有xmlhttpRequest的html5 Canvas签名板错误

Question

I am following this post: Can't get html5 Canvas signature pad to submit to database , and is a great signature script, but I already have a error when I tried to save it into DB...the console give me this error:

Error: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Can you help me with this part of javascript to fix it:

$("#saveSig").click(function saveSig() {
    //encode URI
    var sigData = encodeURIComponent(canvas.toDataURL("image/png"));
    $("#imgData").html('Thank you! Your signature was saved');
    var ajax = XMLHttpRequest();
    ajax.open("POST", 'sign/signature.php');
    ajax.setRequestHeader('Content-Type', 'application/upload');
    ajax.send(sigData);
    $('#debug').html(sigData);
});

Answer 1

I already found the answer!

this is the hidden input in the canvas:

<input type="hidden" value="<?php echo $user_id; ?>" name="user_id" id="user_id" />

here is the code which will run this script:

$("#saveSig").click(function saveSig() {
    //encode URI
    var sigData = canvas.toDataURL("image/png");
    var user_id = $("#user_id").val();  //here the id is showed, like 1, 2, etc
    $("#firm").html("Thank you! Your signature was saved with the id: "+user_id);
    $("#debug").html(sigData);
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST", "sign/signature.php",false);
ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
}
ajax.setRequestHeader("Content-Type", "application/upload");
ajax.send("imgData="+sigData);
   // ajax.send("user_id"+user_id);  //here give me this error: InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.
});

DB connection:

<?php
  if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
  {
  $session_id = $_SERVER['REMOTE_ADDR'];
  // Get the data
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

//$user_id = (isset($_POST['user_id'])) ? $_POST['user_id'] : ""; //not works
//$user_id = $_POST['userId']; //not works

$user_id = '1'; // when I put a number the id is saved

// process your sigData here (e.g. save it in the database together with the user_id)

  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, ",")+1);

  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);

  //echo "unencodedData".$unencodedData;
  $imageName = "sign_" . rand(5,1000) . rand(1, 10) . rand(10000, 150000) . rand(1500, 100000000) . ".png";
  //Set the absolute path to your folder (i.e. /usr/home/your-domain/your-folder/
  $filepath = "../signature/" . $imageName;

  $fp = fopen("$filepath", 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );

  //Connect to a mySQL database and store the user's information so you can link to it later

include_once("CONN/configs.php");
        try{
    $statement = $conn->prepare("INSERT INTO SIGNATURE (`session`, `user_id`, `signature`) VALUES (?, ?, ?)");
    if ($statement->execute(array($session_id, $user_id, $imageName)));

        echo '<div class="alert alert-success">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        Firma con id: '.$user_id.' guardada correctamente.</div>';
    }
    catch (Exception $e) 
    {
        echo '<div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
        Error al tratar de guardar la firma.</div>';
        die;
    }
}
?>

I hope someone will need this.

Best regards!

Answer 2

The error message says what you should do: you should use the 'new' operator to construct 'XMLHttpRequest'.

Where you create your ajax object, change var ajax = XMLHttpRequest(); to var ajax = new XMLHttpRequest();

Since you are using jquery anyway, you can use jquerys ajax method to make the ajax request instead of dealing with the browser specifics of XMLHttpRequest .

$("#saveSig").click(function saveSig() {
  //encode URI
  var sigData = encodeURIComponent(canvas.toDataURL("image/png"));
  $.ajax({
    type: "POST",
    url: 'sign/signature.php',
    contentType: 'application/upload',
    data: sigData,
    success: function () {
      $("#imgData").html('Thank you! Your signature was saved');     
    }
  });
  $('#debug').html(sigData);
});

Update In response to you comments:

You must understand, that this javascript and the ... click(function saveSig() {...} is executed in the browser. So you shouldn't put any php in there, because the php must be executed by the webserver. When you click on the "#saveSig" element, the browser executes this function and with the call of $.ajax(...) it sends a new HTTP POST request to the webserver in the background calling the url 'sign/signature.php'. The response data to that request is available to the success function. Here follows an example of how the webserver (php) and the browser (javascript) could work together.

sign/signature.php

<?php
// read the request data:
$sigData = (isset($_POST['data'])) ? $_POST['data'] : "";
$user_id = (isset($_POST['UserId'])) ? $_POST['userId'] : "";

// process your sigData here (e.g. save it in the database together with the user_id)

//generate the response:
echo "Successfully saved signature for user id: ".$user_id.".";
?>

javascript:

$("#saveSig").click(function saveSig() {
  //encode URI
  var sigData = encodeURIComponent(canvas.toDataURL("image/png"));
  $.ajax({
    type: "POST",
    url: 'sign/signature.php',
    contentType: 'application/upload',
    data: {
      data: sigData,
      user_id: $('#user_id').val() // this get's the value from the hidden user_id input
    },
    success: function (responseData) {
      $("#imgData").html('Thank you!' + responseData);
    }
  });
  $('#debug').html(sigData);
});

Maybe the AJAX Introduction by w3schools is interesting to you