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

Question

我有一个canvas

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

你没有说你使用的是哪个数据库。也许 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... 都必须替换为您的实际数据库值。

Answer 2

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

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

使用您将要使用的数据库引擎创建数据库
创建一个 table 并添加一个 BLOB 类型来存储图像的内容。您可能还希望获得一个自动递增的 ID 字段，以便稍后可以使用其 ID 值检索图像。实际的 table 看起来像这样： 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">

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

How to save image on a Kineticjs canvas to database?

html

javascript

php

kineticjs