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

【问题标题】：How to save image on a Kineticjs canvas to database?如何将 Kineticjs 画布上的图像保存到数据库？
【发布时间】：2015-02-23 18:05:59
【问题描述】：

我有一个画布

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

【问题讨论】：

将文件保存到数据库是不好的做法。以您想要的任何名称将文件存储到磁盘（我喜欢 sha1() 文件的内容，并使用它），然后将路径保存到数据库

标签： javascript php html kineticjs

【解决方案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">

【讨论】：

嘿，我现在可以将数据添加到数据库中，但我无法将数据显示到图像/png 中。你能帮忙吗？
非常感谢，但我无法显示我的图片：'（我会从您的网站将照片发送到您的电子邮件。
如果我看不到该网站，我真的无能为力。
我现在将我网站的一些照片发送到您的电子邮件。谢谢你的好意。

【解决方案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... 都必须替换为您的实际数据库值。

【讨论】：