- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the format of the URL string of IText object using FabricJS?
In this tutorial, we are going to learn about how to change the format of 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 change the format of the URL string of IText object by using the format property.
Syntax
toDataURL({ format: String }: 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, multiplier and a lot of other properties can be changed of which format is a property
Options Keys
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
Defaul value without using the format property
Let’s see a code example to see the logged output when using the toDataURL method without using the format property. 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 specified the format of our image, it will be according to the set default which is “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
Using the toDataURL method along with format property
Let’s see a code example to see how the IText object looks like when the toDataURL method is used along with the format property. In this case we will be able to specify the format of our 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>
- Related Articles
- FabricJS – How to change the format of the URL string of a Line object?
- How to remove current object transform in the URL string of IText object using FabricJS?
- How to remove current object shadow in the URL string of IText object using FabricJS?
- How to set the quality level in the URL string of IText object using FabricJS?
- How to set a multiplier to scale by in the URL string of IText object using FabricJS?
- How to convert an IText object into a data-like URL string using FabricJS?
- How to change the font family of IText using FabricJS?
- How to change the font style of IText using FabricJS?
- How to change the font weight of IText using FabricJS?
- How to change the colour of cursor in IText using FabricJS?
- How to change the duration of cursor fadein in IText using FabricJS?
- How to change the selection color of text in IText using FabricJS?
- How to change the alignment of text to path in IText using FabricJS?
- How to change the cursor width in IText using FabricJS?
- How to straighten an IText object using FabricJS?
