Как сохранить и извлечь 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. Я не знаю, где ошибка.
Решение
Вы можете использовать метод холста toDataUrl. Возвращает строку с типом и форматом данных, за которой следуют данные изображения в кодировке base64. Эти данные вы можете отправить на сервер для декодирования и сохранения в виде изображения.
Другие решения
Если вы «хотите сохранить и извлечь холст 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));