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

Question

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

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

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从应用程序/八位字节流创建图像