fabricjs
Serialización de lienzos FabricJS

Angular 2 AngularJS CSS HTML html5-canvas JavaScript jQuery Node.js PHP SVG
Buscar..


Introducción

Una vez que haya comenzado a crear una aplicación con FabricJS, no tardará en darse cuenta de que necesitará guardar los resultados del lienzo / sus contenidos en el servidor. O puede exportarlos como archivos al cliente. Para este propósito, necesitarás una serialización de lienzo . Ahora, algunos de ustedes pueden preguntar por qué la serialización podemos guardarlo como una imagen. Por lo tanto, la respuesta sería: Guardar imagen en un servidor necesita ancho de banda y el texto es mucho mejor en este caso.

Sintaxis

  1. JSON.stringify (lienzo) : llama implícitamente al método JSON en el objeto pasado. Da representacion de cuerdas
  2. canvas.toObject () : devuelve la misma representación que toJSON, solo en forma de objeto real
  3. canvas.toSVG () : devuelve una representación SVG del lienzo

Observaciones

Para obtener más información sobre la serialización de Canvas de FabricJS, consulte el enlace Serialización de Canvas

Serilización de lona

<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

Violín



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow