当前位置：网站首页>Fabric. JS compact JSON

Fabric. JS compact JSON

2022-07-02 05:18:00 【Director of Moral Education Department】

Brief introduction

give the thumbs-up + Focus on + Collection = Learned to

If you don't know much about Fabric.js Serialization and deserialization of , You can see Fabric.js serialize and Fabric.js Deserialization .

This article will talk about “ Streamlining JSON” It's actually Compact serialization . Serialization can put Fabric.js The canvas of is exported as a JSON object .

When we want to save the canvas to the server , What is transmitted to the background is actually a segment JSON . If you want to re render , Just put this paragraph JSON Throw it to Fabric.js , Call the corresponding method to render to the page .

But if you think Fabric.js Default exported JSON Too big 、 If you don't need so many attributes , You can use a thin version of the configuration .

Hands on coding

Compare the default export with the compact Export .

file

I added... To the page 1 A background picture and 2 Basic graphic elements , If you use the default serialization , The object is really a little more .

If you only need core attributes , Just for rendering , That can be used “ Thin serialization ”.

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas><!--  introduce  Fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script>  //  Initialize canvas   canvas = new fabric.Canvas('canvasBox', {    includeDefaultValues: false //  instructions toObject/toDatalessObject Whether the default value should be included , If set to false, Takes precedence over the object value   })  console.log(canvas.toObject()) //  Output serialized content </script>

《canvas.includeDefaultValues file 》

take includeDefaultValues Set to false You can make canvas.toObject() Method outputs a reduced JSON .

includeDefaultValues The default value of is true , So the basic version will be output by default JSON Content .

You can modify it includeDefaultValues Value , Observe the changes of the output object .

I need to remind you ： If your project needs only to see results , You don't need to worry about too many internal attributes , You can try to use the content mentioned in this article , The reduced data is transmitted to the back end , This saves space .

Careful students should also see , Even after the reduction JSON data , The version number will still be saved in it . If the version number doesn't work for you , You can also use it JS The method of version Get rid of . But I don't suggest you do this .