How to convert an IText object into a data-like URL string using FabricJS?-JS Tutorial-php.cn

How to convert an IText object into a data-like URL string using FabricJS?

王林

Release： 2023-09-14 13:21:16

forward

1263 people have browsed it

如何使用 FabricJS 将 IText 对象转换为类似数据的 URL 字符串？

In this tutorial, we will learn how to convert an IText object into a data-like URL string using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can convert an IText object into a data-like URL string using the toDataURL method.

grammar

toDataURL(options: Object): String

Copy after login

parameter

options (optional) - This parameter is an object that provides additional customization for the URL representation of the IText object. Using this parameter format, quality, multiplier and many other properties can be changed.

Example 1

Do not use the default value of toDataURL method

Let's look at a code example to see what an IText object looks like without using the toDataURL method. When using the toDataURL method, the URL representation of the IText object is returned. In this example, we create an itext object and assign various properties to it, such as stroke, fill, shadow, etc. However, since we are not using the toDataURL method, we will not be able to log in the console instead of the default value of the itext object.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Default value without using toDataURL method</h2>
   <p>You can open console from dev tools and see the logged output</p>
   <canvas id="canvas"></canvas>
   
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Console logging the itext object
      console.log("The itext object is as follows: ", itext);
   </script>
</body>
</html>

Copy after login

Example 2

Use toDataURL method

Let's look at a code example to see the output logged when using the toDataURL method. Once we open the console from the development tools, we can see the URL representation of the IText object. We can copy the URL and paste it into the address bar of a new tab to see the final output.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the toDataURL method</h2>
   <p> You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the image </p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.", {
            width: 300,
            left: 50,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL());
   </script>
</body>
</html>

Copy after login

The above is the detailed content of How to convert an IText object into a data-like URL string using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!