javascript - 我们如何在php中将html5 Canvas 图像保存到数据库

Question

这个问题已经有答案了:

How to save an HTML5 Canvas as an image on a server? (8 个回答)

已关闭 9 年前。

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

我的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 讨论的范围，但这个示例应该可以帮助您开始了解所涉及的概念。

将 Canvas 转换为 imageUrl

如果要将 Canvas 内容保存为图像，可以使用 canvas.toDataURL()，它以 .png 格式返回 Canvas 的 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);

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