Как сохранить и извлечь HTML 5 canvas (Fabric.js) в блоб MySQL

Я хочу сохранить и извлечь холст HTML 5, который я нарисовал с помощью Fabric.js, библиотеки JavaScript, в таблицу MySQL, используя PHP с полем, а именно cnvs_obj из BLOB тип. Я видел много уроков и сессий 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. Я не знаю, где ошибка.

0

Решение

Вы можете использовать метод холста toDataUrl. Возвращает строку с типом и форматом данных, за которой следуют данные изображения в кодировке base64. Эти данные вы можете отправить на сервер для декодирования и сохранения в виде изображения.

0

Другие решения

Если вы «хотите сохранить и извлечь холст HTML 5, который я нарисовал с помощью Fabric.js», то с 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));
0