fabricjs
Serialisation de toile FabricJS

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


Introduction

Une fois que vous avez commencé à créer une application avec FabricJS, vous ne serez pas en retard lorsque vous réaliserez que vous devrez enregistrer les résultats du canevas / son contenu sur le serveur. Ou bien les exporter sous forme de fichiers sur le client. Pour cela, vous aurez besoin d'une sérialisation sur toile . Maintenant, certains d’entre vous peuvent demander pourquoi la sérialisation peut être enregistrée en tant qu’image. Donc, la réponse serait que l'enregistrement de l'image sur un serveur nécessite de la bande passante et que le texte s'avère bien meilleur dans ce cas.

Syntaxe

  1. JSON.stringify (canvas) - appelle implicitement la méthode JSON sur l'objet passé. Donne la représentation de la chaîne
  2. canvas.toObject () - Retourne la même représentation que toJSON, uniquement sous la forme d'un objet réel
  3. canvas.toSVG () - Retourne une représentation SVG du canevas

Remarques

Pour en savoir plus sur la sérialisation de toile FabricJS Reportez-vous au lien Sérialisation de la toile

Sérilisation sur toile

<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

Violon



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow