fabricjs
FabricJS canvas Serialization

Angular 2 AngularJS CSS HTML html5-canvas JavaScript jQuery Node.js PHP SVG
Sök…


Introduktion

När du har börjat bygga en applikation med FabricJS kommer det inte att vara sent när du inser att du måste spara resultaten av duken / dess innehåll på servern. Eller kan exportera dem som filer till klienten. För just detta ändamål behöver du canvas serialisering . Några av er kanske frågar Varför serialisering kan vi spara det som en bild. Så att svaret skulle spara bild på en server behöver bandbredd och text visar sig mycket bättre i detta fall.

Syntax

  1. JSON.stringify (canvas) - implicit kallar till JSON-metoden på passerat objekt. Ger strängrepresentation
  2. canvas.toObject () - returnerar samma representation som toJSON, endast i form av ett faktiskt objekt
  3. canvas.toSVG () - returnerar en SVG-representation av duken

Anmärkningar

För mer information om FabricJS kanvasserivering Se länken Canvas Serialization

Canvas Serilization

<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

Fiol



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow