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

我有一块帆布

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保存到我的数据库？

您现在直接写入服务器的文件系统,始终使用'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页面上,您将像这样使用它