如何将 HTML 5 画布 (Fabric.js) 保存和检索到 MySQL blob答案

【问题标题】：How to Save and retrieve HTML 5 canvas (Fabric.js) into MySQL blob如何将 HTML 5 画布 (Fabric.js) 保存和检索到 MySQL blob
【发布时间】：2015-06-15 10:38:10
【问题描述】：

我想将使用 JavaScript 库 Fabric.js 绘制的 HTML 5 画布保存并检索到使用 PHP 的 MySQL 表中，该表具有 BLOB 类型的字段 cnvs_obj。我看过很多 tuts 和 Q/A 会议，但没有一个是循序渐进的教学方式。我该如何做到这一点，将非常感谢你。这是我的画布示例。 编辑： 这是我的完整代码：

<canvas id="c" style="border:1px solid black;" width="500px" height="300px" ></canvas>
<button onclick="myFunction()" id="btn2">Click me</button>
<script type="text/javascript" src="fabric.min.js"></script>
<script type="text/javascript">
var canvas = new fabric.Canvas('c');
$(function () {     
    //canvas.stateful = true;
    var wel = new fabric.Text('Welcome to FabricJs', {
        fontFamily: 'Delicious_500',
        backgroundColor: 'red',
        left: 80, 
        top: 100 
    });
    canvas.add(wel);
});
canvas.renderAll();
function myFunction() {
    console.log(JSON.stringify(canvas));
    var str_json = JSON.stringify(canvas);
    // send JSON to PHP
    $.ajax({
        type: 'POST',
        url: 'hallo_json.php',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: { hallo_str: JSON.stringify(str_json) },

    });     
    alert(str_json);

}

</script>

这是 PHP 代码：

<?php
header('Content-type: text/html');
print_r(json_decode($_POST['str_json']));

现在我可以生成 JSON，但出现错误 200。我不知道错误在哪里。

【问题讨论】：

我无法访问 php 页面中的 str_json 变量。我只是想知道是否有其他方法可以做到这一点。

标签： php canvas mysqli html5-canvas fabricjs

【解决方案1】：

您可以使用画布方法toDataUrl。它返回带有数据类型和格式的字符串，后跟 base64 编码的图像数据。您可以将此数据发送到服务器进行解码并保存为图像。

【讨论】：

【解决方案2】：

如果您“想要保存和检索我使用 Fabric.js 绘制的 HTML 5 画布”，那么 JSON 很好，通过在客户端和服务器之间传递 JSON 作为文本字符串，您可以轻松恢复/保存画布内容通过 loadFromJSON/toJSON 或 loadFromDataLessJSON/toDatalessJSON。

通过BLOB，它只是将字符串保存为二进制格式，它不会与PHP中的字符串有关。

在您的代码中，您只想将所有画布保存到 JSON 字符串，因为浏览器中没有本地方法可以从 JSON 字符串构建画布及其内容，您必须构建自己的方法来恢复画布内容。

// add Text here, state A
...

// export to json
var json = JSON.stringify(canvas.toJSON());

// add another Tex here, state B
...

// here canvas will go back to the state A
// because it will load JSON data from state A and restore that state
canvas.clear();
canvas.loadFromJSON(JSON.parse(json), canvas.renderAll.bind(canvas));

【讨论】：