Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the quality level in the URL string of IText object using FabricJS?
In this tutorial, we are going to learn about how to set the quality level in the URL string of IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.
Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can set the quality level in the URL string of IText object by using the quality property.
Syntax
toDataURL({ quality: Number }: Object): String
Parameters
options (optional) ? This parameter is an Object which provides additional customizations to the URL representation of the IText object. Using this parameter height, quality, format and a lot of other properties can be changed of which quality is a property.
Options Keys
quality ? This property accepts a Number value which denotes the quality level of the final output image. The accepted values are between 0 and 1, excluding 0. 0.1 denotes the worst quality and 1 is the best. This property can only be used for jpeg format. The default value is 1.
Example 1: Without using the quality property
Let's see a code example to see the output image when the quality property is not used. As soon as we open the console from the dev tools, we can see the URL representation of the IText object. We can copy that URL and paste it into the address bar of a new tab to see the final output. Since we have not used the quality property, the default value will be used, which is 1.
<!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 final 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.\nLorem ipsum dolor sit amet \nconsectetur adipiscing.",{
width: 300,
left: 310,
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>
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA...
Example 2: Using the quality property
Let's see a code example to see how the final output image of the IText object looks like when the quality property is used. In this case, we passed it a value of 0.1. Hence the quality of the final image will be changed to 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 final 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.\nLorem ipsum dolor sit amet \nconsectetur adipiscing.",{
width: 300,
left: 310,
top: 70,
fill: "#c70039",
backgroundColor: "#c1dfed",
stroke: "#c70039",
originX: "center",
shadow: shadow,
}
);
// Add it to the canvas
canvas.add(itext);
// Using the toDataURL method with quality
console.log(itext.toDataURL({ format: "jpeg", quality: 0.1 }));
</script>
</body>
</html>
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA... (compressed with low quality)
Key Points
- The quality property only works with JPEG format images
- Quality values range from 0.1 (worst) to 1.0 (best)
- Lower quality values result in smaller file sizes but reduced image clarity
- The default quality is 1.0 when not specified
Conclusion
The quality property in FabricJS allows you to control the compression level of JPEG images generated from IText objects. Use lower values to reduce file size at the cost of image quality, making it useful for web optimization.
339 Views
