In this tutorial, we will learn how to set the quality level in 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 set the quality level in a Line object's URL string, we use the quality attribute.
toDataURL({ quality: Number }: Object): String
Options (optional) - This parameter is an object that provides additional customization for the URL representation of the Line object. Height, mass, format and many other properties can be changed using this parameter, where mass is a property.
quality - This property accepts a Number value that represents the quality level of the final output image. Acceptable values are between 0 and 1, excluding 0. 0.1 represents the worst quality, and 1 represents the best quality. This property is only available for jpeg format. The default value is 1.
Let's look at a code example to see the output image when not using the quality 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 are not using the quality attribute, the default value, which is 1, will be used.
<!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>Without using the quality property</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 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 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>
Let's look at a code example to see what the final output image of a Line object looks like when using the quality property. In this case, we passed it the value 0.1. Therefore the quality of the final image will become the worst.
<!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 quality property</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 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 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' , quality: 0.1})); </script> </body> </html>
The above is the detailed content of FabricJS - How to set quality level in URL string of Line object?. For more information, please follow other related articles on the PHP Chinese website!