Home > Article > Web Front-end > FabricJS - How to change the format of a Line object's URL string?

FabricJS - How to change the format of a Line object's URL string?

王林forward: 2023-08-30 10:13:05657browse

FabricJS – 如何更改 Line 对象的 URL 字符串的格式？

In this tutorial, we will learn how to change the format of a URL string of a Line object using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled. We can create a line object by creating an instance of Fabric.Line, specifying the x and y coordinates of the line, and adding it to the canvas. To change the format of a Line object's URL string, we use the format property.

grammar

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

parameter

Options (optional) - This parameter is an object that provides additional customization for the URL representation of the Line object. Height, mass, multiplier and many other properties can be changed using this parameter, where format is a 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".

Do not use the default value of the format attribute

Example

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 dev tools, we can see the URL representation of the Line 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 Line 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL());
   </script>
</body>
</html>

Using the toDataURL method and format attribute

Example

Let's look at a code example to see what a Line object looks like when the toDataURL method is used with the format property. 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 Line 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL({format: "jpeg"}));
   </script>
</body>
</html>

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

Statement：

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

Previous article：Implementing a binary search tree in JavaScriptNext article：Implementing a binary search tree in JavaScript

See more

FabricJS - How to change the format of a Line object's URL string?

grammar

parameter

Option key

Do not use the default value of the format attribute

Example

Using the toDataURL method and format attribute

Example

Related articles