Fabric.js でインタラクティブなキャンバスをサーバーに保存 - カスタム属性付き
2024-07-27
Fabric.js でキャンバスをカスタム属性付きでサーバーに保存する方法
Fabric.js は、HTML5 でインタラクティブなキャンバスを作成するための JavaScript ライブラリです。このチュートリアルでは、Fabric.js を使用してキャンバスをサーバーに保存する方法を説明します。キャンバスには、カスタム属性を追加して保存することもできます。
前提条件
このチュートリアルを完了するには、以下のものが必要です。
- サーバーサイドスクリプト (Node.js、PHP、Python など)
- Fabric.js
手順
- キャンバスを作成する
<!DOCTYPE html>
<html>
<head>
<title>Fabric.js Canvas Save</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.2/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
// キャンバスにオブジェクトを追加する
var rect = new fabric.Rect({
width: 100,
height: 50,
left: 50,
top: 50,
fill: 'red'
});
canvas.add(rect);
</script>
</body>
</html>
- キャンバスデータを JSON に変換する
var canvasData = canvas.toJSON();
console.log(canvasData);
- JSON データをサーバーに送信する
var xhr = new XMLHttpRequest();
xhr.open('POST', '/save-canvas');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Canvas saved successfully');
} else {
console.error('Error saving canvas:', xhr.statusText);
}
};
xhr.send(canvasData);
- サーバー側でキャンバスデータを処理する
<?php
// JSON データを取得する
$canvasData = file_get_contents('php://input');
$canvas = json_decode($canvasData, true);
// カスタム属性を追加する
$canvas['customAttribute'] = 'my custom value';
// キャンバスデータを保存する
$json = json_encode($canvas);
file_put_contents('saved-canvas.json', $json);
?>
説明
- 最初の手順では、Fabric.js キャンバスを作成します。
- 次の手順では、
canvas.toJSON()メソッドを使用してキャンバスデータを JSON 形式に変換します。 - 次の手順では、
XMLHttpRequestオブジェクトを使用して JSON データをサーバーに送信します。 - 最後のステップでは、サーバー側スクリプトが JSON データを受信し、カスタム属性を追加して保存します。
カスタム属性の保存
上記の例では、customAttribute というカスタム属性をキャンバスデータに追加しています。この属性は、サーバー側スクリプトでアクセスおよび変更できます。
データベースへの保存
キャンバスデータをデータベースに保存するには、データベースに接続するサーバー側スクリプトを作成する必要があります。データベースに保存する前に、JSON データをデータベーススキーマに一致する形式に変換する必要がある場合があります。
<!DOCTYPE html>
<html>
<head>
<title>Fabric.js Canvas Save</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.2/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<button id="saveButton">Save Canvas</button>
<script>
var canvas = new fabric.Canvas('canvas');
// キャンバスにオブジェクトを追加する
var rect = new fabric.Rect({
width: 100,
height: 50,
left: 50,
top: 50,
fill: 'red'
});
canvas.add(rect);
// 保存ボタンをクリックしたときの処理
document.getElementById('saveButton').addEventListener('click', function() {
saveCanvas();
});
function saveCanvas() {
// キャンバスデータを JSON に変換する
var canvasData = canvas.toJSON();
// カスタム属性を追加する
canvasData.customAttribute = 'my custom value';
// JSON データをサーバーに送信する
var xhr = new XMLHttpRequest();
xhr.open('POST', '/save-canvas');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Canvas saved successfully');
} else {
console.error('Error saving canvas:', xhr.statusText);
}
};
xhr.send(canvasData);
}
</script>
</body>
</html>
サーバー側スクリプト (Node.js)
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/save-canvas', (req, res) => {
// JSON データを取得する
const canvasData = req.body;
// カスタム属性を追加する
canvasData.customAttribute = 'my custom value';
// キャンバスデータを保存する
const fs = require('fs');
fs.writeFile('saved-canvas.json', JSON.stringify(canvasData), (err) => {
if (err) {
console.error('Error saving canvas:', err);
res.status(500).send('Error saving canvas');
return;
}
console.log('Canvas saved successfully');
res.status(200).send('Canvas saved successfully');
});
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
- ボタンがクリックされると、
saveCanvas()関数が呼び出されます。 - この HTML コードは、Fabric.js キャンバスと "Save Canvas" ボタンを作成します。
saveCanvas() 関数
- この関数は、以下の処理を行います。
- カスタム属性 'customAttribute' をキャンバスデータに追加します。
- JSON データを
/save-canvasエンドポイントに POST リクエストとして送信します。
- JSON データを 'saved-canvas.json' ファイルに保存します。
- リクエスト本文から JSON データを取得します。
- このスクリプトは、
/save-canvasエンドポイントへの POST リクエストを処理します。
- キャンバスデータをデータベースに保存するには、データベースに接続するコードを追加する必要があります。
- この例では、Node.js を使用してサーバー側スクリプトを書いていますが、他のサーバーサイド言語でも同様に実装できます。
canvas.toDataURL() メソッドを使用して、キャンバスを Data URL 形式に変換できます。Data URL は、ベース64 エンコードされた画像データを含む文字列です。その後、この Data URL をサーバーに送信して保存できます。
var dataURL = canvas.toDataURL('image/png');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/save-canvas');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Canvas saved successfully');
} else {
console.error('Error saving canvas:', xhr.statusText);
}
};
xhr.send('data=' + encodeURIComponent(dataURL));
HTML5 Canvas Blob API を使用する
HTML5 Canvas Blob API を使用して、キャンバスを Blob オブジェクトに変換できます。その後、この Blob オブジェクトを FormData オブジェクトに追加して、サーバーに送信できます。
canvas.toBlob(function(blob) {
var formData = new FormData();
formData.append('canvas', blob);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/save-canvas');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('Canvas saved successfully');
} else {
console.error('Error saving canvas:', xhr.statusText);
}
};
xhr.send(formData);
});
第三者ライブラリを使用する
Fabric.js を補完する、キャンバスをサーバーに保存するための機能を提供するいくつかのサードパーティライブラリがあります。以下に、その例をいくつか紹介します。
これらのライブラリは、独自の機能と利点を提供している場合がありますので、ニーズに合ったライブラリを選択することが重要です。
database json savechanges
