Question

我有画布

function initStage(images) {

    var stage = new Kinetic.Stage({
        container: "container",
        width: 550,
        height: 550
    });

和保存按钮

   $('#save').click( function() {

   stage.toDataURL(function(dataUrl) {
   $.ajax("ajax.php", { data: dataUrl },

    function(data) {
        alert("Your Design Was Saved To The Server");
    }); }); });

和ajax.php

$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

如何将dataURL保存到我的数据库？

Answer 1

您现在直接写入服务器的文件系统，总是使用'image.png'作为其名称（我假设这是一个测试站点，而不是生产站点）。

如果您想将图像内容保存到数据库中，则必须：

使用您将要使用的数据库引擎
创建一个表并添加BLOB类型以存储图像的内容。您可能还希望获得自动递增ID字段，以便稍后可以使用其ID值检索图像。实际的表格如下所示： CREATE TABLE image_table( ID INTEGER AUTO_INCREMENT, IMAGE BLOB, PRIMARY KEY (ID)) ENGINE=InnoDB;
使用您要使用的凭据连接到数据库
执行INSERT SQL语句，将$_POST['data']内容作为参数传递。

$connection = @mysqli_connect('database_hostname','database_username', 
               'database_password','database_databasename');
mysqli_query($connection ,"INSERT INTO image_table VALUES(NULL, '".
mysqli_real_escape_string($connection , $_POST['data']) ."')");

调用mysqli_real_escape_string是正确转义JS脚本发送的数据所必需的，因此在SQL查询期间不会引起麻烦。

如果要从数据库中检索图像，则必须使用SELECT类型查询，例如SELECT ID, IMAGE FROM image_table WHERE ID='".intval(ID)."';"

从数据库中获取图像后，您可以使用类似的内容将其发送到浏览器：

//get the data from the database somehow (mysql query et al.)
//let's assume data retrieved from the DB is in $data
header('Content-Type: image/png');//alter for png/gif/etc.
echo $data['IMAGE'];

在HTML页面上，您将像这样使用它

<img src="/myimagescript.php?id=ID">

Answer 2

您不会说出您正在使用的数据库。也许MySQL因为你正在使用PHP？

这是将dataUrl字符串保存到MySQL数据库的一个开始示例：

$conn = new PDO('mysql:host=myHost;dbname=myDatabase', "myUser", "myPassword");

// INSERT with named parameters
$stmt = $conn->prepare("INSERT INTO myTable(myImageColumnName)VALUES(:theImage)");
$stmt->bindValue(":theImage",$unencodedData);
$stmt->execute();
$affected_rows = $stmt->rowCount();
echo $affected_rows;

当然，所有示例my...都必须替换为您的实际数据库值。

如何将Kineticjs画布上的图像保存到数据库？

2 个答案: