Question

我想使用具有cnvs_obj BLOB类型字段的PHP将使用Fabric.js（一个JavaScript库）绘制的HTML 5画布保存并检索到MySQL表中。我看过很多关于T / 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。我不知道错误在哪里。

Answer 1

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

Answer 2

如果您想要保存和检索我使用Fabric.js＆＃34;绘制的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));

如何将HTML 5 canvas（Fabric.js）保存并检索到MySQL blob中

2 个答案: