如何保存画布，然后使用 ajax 和 php 将其上传到 sql 数据库

Question

我在画布中做了一个非常简单的绘画应用程序，现在我试图弄清楚如何保存画布（作为图像），然后将其上传到 sql 数据库（通过使用 php 和 jquery 和 javascript）。我已经阅读了许多关于如何做到这一点的谷歌页面，但我无法真正理解如何完全做到这一点。

我想出的是，我认为这是将画布制作成图像所需的代码。

var c=document.getElementById("myCanvas");    
var myImage = c.toDataURL("image/png");
    var image = document.getElementById("myCanvas");
    image.src = myImage; 

完成此操作后，我必须发送图像，我想使用 ajax 将图像发送到一个名为 action 的新文件。但问题是我不知道我应该拥有什么数据。

      $.ajax({
            type: "POST",
            url: "action.php",
            data: ??????????,
            success: function(msg){
                alert( "Data Saved: " + msg );
            }
        });     

在我将它发送到操作文件后，我必须将图像上传到数据库。当我在搜索时，我发现了一些叫做 blob 和 base64 的东西，但没有真正了解如何使用它们。

如我所见，存在三个问题： 1.将画布保存到图像中（我不确定我的代码是否正确） 2.通过ajax将图像发送到动作文件（主要问题是要知道要发送什么数据类型） 3. 从这个文件然后将图像发送到数据库，这里我不知道如何发送标准的东西，比如 CRUD（创建、读取、更新、删除）。例如：

 $sql = "INSERT INTO `div`(`ID`, `name`,) 
VALUES( 'ID' ,' " . $_POST["name"] . "')";

但我从互联网上读到的内容与这个简单的插入突击队不同。

我习惯于 php javascript 和 jquery。所以如果我用我可以阅读的语言理解它会更简单

Answer 1

第一：

您需要将该画布制作为图像（canvas.toDataURL('canvasid')），然后使用replace 将其转换为八位字节流

      var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
//ajax call   
 $.ajax({
        url: "action.php",
       type: 'POST',
       contentType: 'application/octet-stream',  
       data: image,
       processData: false
    });

这将在 action.php 中抛出该八位字节流。现在您可以将此流保存在 mysql 中。就像您可以在 mysql 上保存的字符串（使用 varchar）一样，您可以使用数据类型 blob 来保存文件。您也可以将其像文件一样保存在服务器上。 其次：

要在 php 中保存该图像，您将需要 imagecreatefromstring 函数。像这样在 action.php 中使用它：

$image = imagecreatefromstring( $data );

这可能与您的问题非常相似：PHP create image from application/octet stream