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的东西，但是dident真的知道如何使用它们。

我可以看到它存在三个问题： 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中。像字符串（使用varchar）可以保存在mysql上，可以使用数据类型blob来保存文件。您也可以将其保存为服务器上的文件。其次：

要在php中保存该图像，您需要imagecreatefromstring功能。在action.php中使用它，如下所示：

$image = imagecreatefromstring( $data );

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

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

1 个答案: