Question

我正在为电子商务网站创建产品设计页面...... 我需要将设计的图像从客户端保存到数据库.... 我试图保存，但它无法保存...而html5画布对我来说是新的......

我的HTML代码.. ...................

<div id="clothing-designer">
                        <div class="fpd-product" title="Shirt Front" data-thumbnail="images/yellow_shirt/front/preview.png">
                            <img src="./images/yellow_shirt/front/base.png" title="Base Front" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
                            <img src="./images/yellow_shirt/front/body.png" title="Hightlights" data-parameters='{"x": 249, "y": 80}' />
                            <img src="./images/yellow_shirt/front/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
                            <span title="Any Text" data-parameters='{"x": 243, "y": 181, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000"}'>Default Text</span>
                            <div class="fpd-product" title="Shirt Back" data-thumbnail="images/yellow_shirt/back/preview.png">
                                <img src="./images/yellow_shirt/back/base.png" title="Base Back" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
                                <img src="./images/yellow_shirt/back/body.png" title="Hightlights" data-parameters='{"x": 277, "y": 79}' />
                                <img src="./images/yellow_shirt/back/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
                            </div>
                        </div>

Answer 1

您提供的信息很少，但以下是您需要的流程的简要概述。

如何从客户端到数据库获取设计信息的完整描述超出了Stackoverflow讨论的范围，但是这个示例应该让您开始使用所涉及的概念。

将画布转换为imageUrl

如果要将画布内容保存为图像，可以使用canvas.toDataURL（），它以.png格式返回画布的DataURL。例如：

var canvas=document.getElementById("myCanvas");
var dataUrl=canvas.toDataURL();

使用AJAX帖子将该dataUrl发送回您的服务器

$.ajax({
  type: "POST",
  url: "http://localhost/saveCanvasDataUrl.php",
  data: {image: dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})

在PHP端，将传入的dataURL保存到数据库：

<?php

    if(!isset($_POST["code"])){
        die("Post was empty.");
    }

    $sql="insert into designs(image) values(:image)";

    // INSERT with named parameters
    $conn = new PDO('mysql:host=localhost;dbname=myDB', "root", "myPassword");
    $stmt = $conn->prepare($sql);
    $stmt->bindValue(":image",$_POST["image"]);
    $stmt->execute();
    $affected_rows = $stmt->rowCount();
    echo $affected_rows;

?>

<强>另外...

总而言之，保存用户创建的设计组件而不是该设计的图像可能更有用。

创建一个包含有关设计的特定信息的javascript对象：

var item1={
    product:"shirt",
    color:"#d59211",
    price:20,
    text:"Default Text",
    textX:243,
    textY:181
}

使用JSON将该对象转换为字符串

var item1Json=JSON.stringify(item1);

然后将有用的设计数据发布到您的数据库而不是图像。

Answer 2

您可以使用HTML5 Canvas＆＃39; toDataURL()根据文档：

返回一个数据：包含按类型指定格式的图像表示的URL（默认为PNG）

它的用法如下：

var canvas = document.getElementById('thecanvaselement');
// ...maybe some more canvas drawing operations here
var url = canvas.toDataURL();

然后可以使用AJAX将结果（存储在url变量中）发送回服务器，然后像平常一样保存到数据库中。

我们如何在PHP中将html5画布图像保存到数据库中

2 个答案: