Home >Web Front-end >JS Tutorial >How to change the format of an IText object's URL string using FabricJS?

How to change the format of an IText object's URL string using FabricJS?

WBOYforward: 2023-09-07 12:45:02510browse

How to change the format of an IText objects URL string using FabricJS?

In this tutorial, we will learn how to change the format of a URL string of an IText object 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 use the format property to change the format of the IText object's URL string.

grammar

toDataURL({ format: String }: Object): String

parameter

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

Option key

format - This property accepts a String value which allows us to define the format of the output image. Accepted values are "jpeg" or "png". The default value is "png".

Example 1

Do not use the default value of the format attribute

Let's look at a code example to see the output logged when using the toDataURL method without using the format attribute. 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. Since we didn't specify the format of the image, it will be based on the set default of "png".

<!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 the format property</h2>
   <p> You can open console from dev tools and see that the URL representation of the IText object has a "png" format by default </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: 60,
            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>

Example 2

Use toDataURL method and format attribute

Let's look at a code example to see what an IText object looks like when the toDataURL method is used with the format attribute. In this case we will be able to specify the format of the final image. Since the value assigned here is "jpeg", the final image will be in "jpeg" format.

<!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 along with format property</h2>
   <p> You can open console from dev tools and see that the URL representation of the IText object has a "jpeg" format now </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: 60,
            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({format: "jpeg"}));
   </script>
</body>
</html>

The above is the detailed content of How to change the format of an IText object's URL string using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

String format 字符串对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to set custom key to enable/disable unified scaling on FabricJS canvas?Next article：How to set custom key to enable/disable unified scaling on FabricJS canvas?

See more