• 使用FabricJS创建Image对象的JSON表示

    本篇文章介绍一下如何创建图像的 JSON 表示形式 使用 FabricJS 的对象。我们可以通过创建一个实例来创建一个 Image 对象 织物.图像。由于它是FabricJS的基本元素之一，我们也可以轻松地 通过应用角度、不透明度等属性来自定义它。为了创建 JSON Image 对象的表示，我们使用 toJSON 方法。

    语法

    toJSON(propertiesToInclude: Array): Object

     

    参数

    • propertiesToInclude - 此参数接受一个 Array，其中包含任何 我们可能希望在输出中额外包含的属性。这个参数是 可选。

    使用toJSON方法

    示例

    看一个代码示例，看看使用 toJSON 方法时记录的输出。在这种情况下，将返回图像实例的 JSON 表示形式。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.    <!-- Adding the Fabric JS Library-->
    5.    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
    6. </head>
    7. <body>
    8.    <h2>Using the toJSON method</h2>
    9.    <p>
    10.       You can open console from dev tools and see that the logged output contains the JSON representation of the image instance
    11.    </p>
    12.    <canvas id="canvas"></canvas>
    13.    <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
    14.    <script>
    15.       // Initiate a canvas instance
    16.       var canvas = new fabric.Canvas("canvas");
    17.       canvas.setWidth(document.body.scrollWidth);
    18.       canvas.setHeight(250);
    19.       
    20.       // Initiating the image element
    21.       var imageElement = document.getElementById("img1");
    22.       
    23.       // Initiate an Image object
    24.       var image = new fabric.Image(imageElement, {
    25.          top: 50,
    26.          left: 110,
    27.       });
    28.       
    29.       // Add it to the canvas
    30.       canvas.add(image);
    31.       
    32.       // Using the toJSON method
    33.       console.log(
    34.          "JSON representation of the Image instance is: ",
    35.          image.toJSON()
    36.       );
    37.    </script>
    38. </body>
    39. </html>

     

    使用toJSON方法添加其他属性

    示例

    再看一个代码示例，看看如何使用 toJSON 方法。在本例中，我们添加了一个名为“name”的自定义属性。我们可以 将特定属性作为选项中的第二个参数传递给 fabric.Image 实例 对象并将相同的密钥传递给 toJSON 方法。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.    <!-- Adding the Fabric JS Library-->
    5.    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
    6. </head>
    7. <body>
    8.    <h2>Using toJSON method to add additional properties</h2>
    9.    <p>
    10.       You can open console from dev tools and see that the logged output contains added property called name
    11.    </p>
    12.    <canvas id="canvas"></canvas>
    13.    <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
    14.    <script>
    15.       // Initiate a canvas instance
    16.       var canvas = new fabric.Canvas("canvas");
    17.       canvas.setWidth(document.body.scrollWidth);
    18.       canvas.setHeight(250);
    19.       
    20.       // Initiating the image element
    21.       var imageElement = document.getElementById("img1");
    22.       
    23.       // Initiate an Image object with name key
    24.       // passed in options object
    25.       var image = new fabric.Image(imageElement, {
    26.          top: 50,
    27.          left: 110,
    28.          name: "Image instance",
    29.       });
    30.       
    31.       // Add it to the canvas
    32.       canvas.add(image);
    33.       
    34.       // Using the toJSON method
    35.       console.log(
    36.          "JSON representation of the Image instance is: ",
    37.          image.toJSON(["name"])
    38.       );
    39.    </script>
    40. </body>
    41. </html>

     

  • 相关阅读:
    【精华】具身智能：人工智能的下一个浪潮
    document对象概念介绍、验证用户名是否有效、正则表达式对象、两种常见的验证提示效果
    基于JAVA气候分析平台计算机毕业设计源码+数据库+lw文档+系统+部署
    day1项目配置
    SpringBoot+Vue实现前后端分离的汽车配件销售管理系统
    用JavaEE编写一个简单的网页，显示10个“你好”信息，在服务器中运行,在本机上访问，然后用另一台机器访问。
    论文阅读 - Hidden messages: mapping nations’ media campaigns
    逻辑回归模型公式推导
    【PAT（甲级）】1053 Path of Equal Weight
    触摸控件——键盘录入之RTC录入
  • 原文地址：https://blog.csdn.net/lwf3115841/article/details/132698694