私が取り組んでいるサイトにページがあり、そのページは「create.php」と呼ばれています。これにより、ユーザーはマウス クリックで HTML5 キャンバス上に「エンティティ」と呼ばれる JavaScript オブジェクトを作成できます。作成したエンティティを mysql データベースに保存してから、サイトの別のページ ('restore.php' という名前) で再作成したいと考えています。キャンバスの状態だけでなく、javascript エンティティを保存および復元することがサイトにとって重要であるため、キャンバスの save() および restore() はオプションではありません。私がこれまでに持っているシステムは、以下のリンクに示されています。
http://codepen.io/Tejay/pen/yDxFu
ご覧のとおり、「作成」ページでエンティティを問題なく保存および復元できます。ただし、このサイトでは、エンティティを mysql データベースに保存し、復元ページで再作成する必要があります。restore.php でエンティティを再作成する際に問題が発生しています。
各エンティティをシリアル化されたオブジェクトに変換し、それを配列にプッシュします。この配列は、create.php でテキスト型として mysql に挿入されます (blob も試しましたが成功しませんでした)。
saveToStore = function(serializedEntities) {
var save = confirm("Are you sure you want to save this canvas to the database?");
if(save == true) {
store = serializedEntities;
window.location.href="save_canvas.php?store=" +store;
}
};
シリアル化されたオブジェクト配列は、mysql の save_canvas.php に挿入されます。
$canvas = $_GET['store'];
function save_canvas($canvas) {
if(isset($_GET['store'])) {
$canvas = $_GET['store'];
mysqli_query($con, "INSERT INTO canvas (canvas_id, canvas_array) VALUES ('','$canvas')");
}
}
save_canvas($canvas);
配列はその後、restore.php で取得されます。retore.php の JavaScript コードは、php $store 変数を javascript に渡すことを除いて、create.php のコードとほとんど同じです。
<?php $store = $data['canvas_array']; ?>
<script>
var store = '<?php echo $store; ?>';
createFromStore = function() {
if(store.length > 0) {
for(var i=0;i<store.length;i++)
addEntity(store[i]);
}
}
else {
alert('nothing in store');
}
};
createFromStore(store);
</script>
シリアル化された配列を mysql に格納すると、[object Object] が返されます。デバッグの目的で、JSON.stringify を使用してオブジェクト配列を保存し、restore.php で取得して、その内容を正常に出力しました。残念ながら、循環参照のため、JSON はオプションではありません。格納された配列を createFromStore に正しく渡していないように感じますが、何が間違っているのかわかりません。アドバイスをいただければ幸いです。