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 convert an IText object into a data-like URL string using FabricJS?
In this tutorial, we are going to learn about how to convert an IText object into a data-like URL string 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 convert an IText object into a data-like URL string by using the toDataURL method.
Syntax
toDataURL(options: 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 format, quality, multiplier and a lot of other properties can be changed.
Example 1: Default Object Without toDataURL
Let's see a code example to see how the IText object looks like when the toDataURL method is not used. In this example, we have created an itext object and assigned it various properties like stroke, fill, shadow, etc. However, since we have not used the toDataURL method, we will see the itext object's default value logged in the console.
<!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 toDataURL method</h2>
<p>You can open console from dev tools and see the logged output</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: 50,
top: 70,
fill: "#c70039",
backgroundColor: "#c1dfed",
stroke: "#c70039",
originX: "center",
shadow: shadow,
}
);
// Add it to the canvas
canvas.add(itext);
// Console logging the itext object
console.log("The itext object is as follows: ", itext);
</script>
</body>
</html>
The itext object is as follows: IText {type: "i-text", version: "5.1.0", originX: "center", originY: "top", left: 50, ?}
Example 2: Using the toDataURL Method
Let's see a code example to see the logged output when using the toDataURL method. 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 as an image.
<!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</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 that 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 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: 50,
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>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAD8CAYAAAB...
How It Works
The toDataURL method converts the IText object into a Base64-encoded PNG image URL. This data URL can be used directly in HTML img tags, saved as an image file, or displayed in browsers. The method renders the text with all its styling properties including fills, strokes, shadows, and transformations.
Common Use Cases
- Exporting styled text as images for sharing or downloading
- Creating thumbnails of text objects
- Converting interactive text to static images for email or print
- Generating images for social media posts
Conclusion
The toDataURL method provides an easy way to convert FabricJS IText objects into image URLs. This enables you to export styled text as standalone images that can be used across different platforms and applications.
382 Views
