fabricjs
FabricJSのキャンバスのシリアライゼーション

Angular 2 AngularJS CSS HTML html5-canvas JavaScript jQuery Node.js PHP SVG
サーチ…


前書き

FabricJSを使用してアプリケーションを構築し始めたら、キャンバス/その内容の結果をサーバーに保存する必要があることに気付いても遅くなることはありません。または、ファイルとしてクライアントにエクスポートすることもできます。この目的のためには、 キャンバスのシリアル化が必要です 。今ではシリアライゼーションをなぜイメージとして保存することができるのかと聞く人もいます。だから答えはサーバーに画像を保存するには帯域幅が必要で、この場合にはテキストがはるかに優れていることが証明されます。

構文

  1. JSON.stringify（canvas） - 渡されたオブジェクトのtoSSONメソッドを暗黙的に呼び出します。文字列表現を与える
  2. canvas.toObject（） - 実際のオブジェクトの形式でのみ、 toSSONと同じ表現を返します。
  3. canvas.toSVG（） - キャンバスのSVG表現を返します。

備考

FabricJS canvas serializationの詳細は、「 Canvas Serialization」リンクを参照してください。

キャンバスセリシング

<canvas id = "canvas" height='400' width='500'></canvas>

var canvas = new fabric.Canvas(document.getElementById('canvas'));
console.log(JSON.stringify(canvas)); // '{"objects":[],"background":""}'

canvas.add(new fabric.Rect({
  left: 10,
  top: 10,
  height: 50,
  width: 50,
  fill: 'green',
     stroke:'black'
}));
canvas.renderAll();

console.log(JSON.stringify(canvas));//logs the string representation
console.log(canvas.toObject());//logs canvas as an object
console.log(canvas.toSVG());//logs the SVG representation of canvas

フィドル



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow