需要帮助将HTML和画布数据插入MySQL数据库

I have a little web app where you can draw onto a canvas and leave a comment (using a form submit). Now I just need help sending that data into a MySQL database.

This is a form where the user would input their comment. When they click the "Post" button a function called "boo" runs.

<form action="testSave.php" method="post" onsubmit="boo();">
    <div id="canvas-bottom">
        <input type="text" id="comment-box" name="comment" placeholder="Comment"/>
        <input type="submit" id="post-button" name="post" value="Post"/>
    </div>
</form>

The "boo" function gets the canvas data and sends it to another PHP file called "testSave.php"

<script>
function boo(){
    var canvasData = drawingCanvas.toDataURL();     
    $.ajax({
      type: "POST",
      url: "testSave.php",
      data: { 
         canvasData: canvasData
      }
    })
}
</script>

This is the "testSave.php" file

<?php
if(isset($_POST['canvasData'], $_POST['post'])) {
    $img = $_POST['canvasData'];
    $filteredData = substr($img, strpos($img, ",")+1);

    $comment = strip_tags($_POST['comment']);   
    $comment = mysqli_real_escape_string($db, $comment);

    $sql = "INSERT into posts (sketch, comment) VALUES ('$filteredData', '$comment')";

    mysqli_query($db, $sql);

    header("Location: index.php");
}
?>

When this is ran it sends me to it's blank white webpage (/testSave.php), doesn't work.

So with this, im trying to send this data into a mysql database table under "sketch" (where the canvas data would go) and "comment" (where the input data would go) in one single row.

If anyone could help me out on this I would really appreciate it.

I don't see that you defined $db which may be the issue, as your code would not know where to insert the data into. As others have said it's also best to use prepared statements.

if(isset($_POST['canvasData']) and isset($_POST['post'])) {

$mysqlHost = "";
$mysqlUser = "";
$mysqlPassword = "";
$mysqlDatabase = "";

$db=mysqli_connect($mysqlHost, $mysqlUser, $mysqlPassword, $mysqlDatabase);
$img = $_POST['canvasData'];
$filteredData = substr($img, strpos($img, ",")+1);
$comment = strip_tags($_POST['comment']);

if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$stmt = $db->prepare("INSERT into posts (sketch, comment) VALUES (?, ?)");
$stmt->bind_param("ss", $filteredData, $comment);
$stmt->execute();
$stmt->close();
$db->close();
}
?>

Since you want to submit using ajax, your code should look this;

HTML

 <form action="" method="post">
        <div id="canvas-bottom">
            <input type="text" id="comment-box" name="comment" placeholder="Comment"/><br>
<span id="msg" style="color: green;font-style: italic;"></span> // success message
            <input type="submit" id="post-button" name="post" value="Post"/>
        </div>
    </form>

JS

$(document).ready(function(){
            $("#post-button").click(function(){
                var name =$("#comment-box").val();
                $.ajax({
                    url:'testSave.php',
                    method:'POST',
                    data:{
                        name:name
                    },
                   success:function(response){
                       $("#msg").html(response);
                   }
                });
            });
        });

PHP (testSave.php)

  <?php
        $img = $_POST['canvasData'];
        $filteredData = substr($img, strpos($img, ",")+1);

        $comment = strip_tags($_POST['comment']);   
        $comment = mysqli_real_escape_string($db, $comment);

        $sql = "INSERT into posts (sketch, comment) VALUES ('$filteredData', '$comment')";

        if (mysqli_query($db, $sql)) {
              echo "Inserted successfully";
       } else {
              echo "failed";
       }
    ?>