Home > Article > Web Front-end > How to convert an IText object into a data-like URL string using FabricJS?
How to convert an IText object into a data-like URL string using FabricJS?
- 王林forward
- 2023-09-14 13:21:161248browse
In this tutorial, we will learn how to convert an IText object into a data-like URL string using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.
However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can convert an IText object into a data-like URL string using the toDataURL method.
grammar
toDataURL(options: Object): String
parameter
options (optional) - This parameter is an object that provides additional customization for the URL representation of the IText object. Using this parameter format, quality, multiplier and many other properties can be changed.
Example 1
Do not use the default value of toDataURL method
Let's look at a code example to see what an IText object looks like without using the toDataURL method. When using the toDataURL method, the URL representation of the IText object is returned. In this example, we create an itext object and assign various properties to it, such as stroke, fill, shadow, etc. However, since we are not using the toDataURL method, we will not be able to log in the console instead of the default value of the itext object.
<!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.Lorem ipsum dolor sit amet consectetur 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>
Example 2
Use toDataURL method
Let's look at a code example to see the output logged when using the toDataURL method. Once we open the console from the development tools, we can see the URL representation of the IText object. We can copy the URL and paste it into the address bar of a new tab to see the final output.
<!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.Lorem ipsum dolor sit amet consectetur 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>
The above is the detailed content of How to convert an IText object into a data-like URL string using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!