この記事では、FabricJS を使用して画像オブジェクトの JSON 表現を作成する方法を説明します。Fabric.Imageのインスタンスを作成することで、Image オブジェクトを作成できます。これは FabricJS の基本要素の 1 つであるため、角度や不透明度などのプロパティを適用することで簡単にカスタマイズすることもできます。JSON Image オブジェクトの表現を作成するには、toJSONメソッドを使用します。
文法
toJSON(propertiesToInclude: Array): Object
パラメータ
-
propertyToInclude - このパラメータは、出力に追加で含めたいプロパティを含む配列を受け入れます。このパラメータはオプションです。
toJSONメソッドを使用する
例
toJSONメソッドを使用したときに記録される出力を確認するコード例を見てください。この場合、画像インスタンスの JSON 表現が返されます。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using the toJSON method</h2>
<p>
You can open console from dev tools and see that the logged output contains the JSON representation of the image instance
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the toJSON method
console.log(
"JSON representation of the Image instance is: ",
image.toJSON()
);
</script>
</body>
</html>
toJSONメソッドを使用して追加のプロパティを追加します
例
コード例をもう一度見て、toJSONメソッドの使用方法を確認してください。この例では、「name」というカスタム属性を追加しました。オプションの 2 番目のパラメーターとして特定のプロパティをFabric.Imageインスタンス オブジェクトに渡し、同じキーをtoJSONメソッドに渡すことができます。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using toJSON method to add additional properties</h2>
<p>
You can open console from dev tools and see that the logged output contains added property called name
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object with name key
// passed in options object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
name: "Image instance",
});
// Add it to the canvas
canvas.add(image);
// Using the toJSON method
console.log(
"JSON representation of the Image instance is: ",
image.toJSON(["name"])
);
</script>
</body>
</html>