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 remove current object transform in the URL string of IText object using FabricJS?
In this tutorial, we are going to learn about how to remove current object transform (scale, angle, flip, skew) 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 remove current object transform in the URL string of IText object by using the withoutTransform property.
Syntax
toDataURL({ withoutTransform: Boolean }: 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 withoutTransform is a property.
Options Keys
withoutTransform ? This property accepts a Boolean value which allows us to get rid of the current object transform. On passing it a true value, there will no longer be scale, angle, flip or skew in the final output image.
Example 1: Using withoutTransform Property with False Value
Let's see a code example to see the output image when the withoutTransform property is passed a false value. 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. In this example, we have passed the IText object the scaleY property which assigns a vertical scale factor. Thus our output will be scaled vertically. However, since we have also passed the withoutTransform property a false value, our final output image will still contain the scaleY property.
<!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 withoutTransform property and passing it a false value</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 final image contains vertical scaling </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: 60,
top: 70,
fill: "#c70039",
backgroundColor: "#c1dfed",
stroke: "#c70039",
originX: "center",
shadow: shadow,
scaleY: 2,
}
);
// Add it to the canvas
canvas.add(itext);
// Using the toDataURL method
console.log(
itext.toDataURL({ withoutTransform: false })
);
</script>
</body>
</html>
Example 2: Using withoutTransform Property with True Value
Let's see a code example to see how the final output image of the IText object looks like when the withoutTransform property is used and a true value is passed to it. In this case, our final output image will not contain any object transform.
<!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 withoutTransform property and passing it a true value</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 final image does not contain vertical scaling </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: 60,
top: 70,
fill: "#c70039",
backgroundColor: "#c1dfed",
stroke: "#c70039",
originX: "center",
shadow: shadow,
scaleY: 2,
}
);
// Add it to the canvas
canvas.add(itext);
// Using the toDataURL method with withoutTransform
console.log(
itext.toDataURL({ withoutTransform: true })
);
</script>
</body>
</html>
Comparison
| withoutTransform Value | Transform Applied | Output Result |
|---|---|---|
| false | Yes | URL includes all transformations (scale, rotation, etc.) |
| true | No | URL excludes transformations, shows original object |
Conclusion
The withoutTransform property in FabricJS allows you to control whether object transformations are included in the generated data URL. Use true to get the original appearance without any scaling, rotation, or other transforms.
196 Views
