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

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 anobjectthat provides additional customization for the URL representation of the Line object. Height, mass, multiplier and many other properties can be changed using this parameter, whereformatis a property.

Option key

• format- This property accepts aStringvalue 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 theformatattribute

Example

Let's look at a code example to see the output logged when using the toDataURL method without using theformatattribute. 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".

     
  
Default value without using the format property
 
 You can open console from dev tools and see that the URL representation of the Line object has a "png" format by default 
    

Using thetoDataURLmethod and format attribute

Example

Let's look at a code example to see what a Line object looks like when thetoDataURLmethod 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.

     
  
Using the toDataURL method along with format property
 
 You can open console from dev tools and see that the URL representation of the Line object has a "jpeg" format now 
    

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!