Home > Article > Web Front-end > How to straighten an Image object using FabricJS?
How to straighten an Image object using FabricJS?
- WBOYforward
- 2023-09-14 16:53:021401browse
In this tutorial, we will learn how to straighten an image object using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one Basic elements of FabricJS, we can also easily customize it through the application Properties such as angle, opacity, etc. To straighten the image object, we use Straightening method.
grammar
straighten(): fabric.Object
Passing values to angle properties without using straighten method
Example
Let's look at a code example to see how our Image object looks when straighten Method is not used. straighten Method straighten by rotating an object from its position The current angle is 0, 90, 180, or 270, etc., depending on which angle is closer. angle Property sets the object's rotation angle in degrees. Here we specify The angle is 45. But since we didn't apply the straighten attribute, the rotation angle It will remain 45 degrees.
<!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>
Passing the angle property a value without using the straighten method
</h2>
<p>You can see that the Image object has an angle of 45 degrees</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Using the straighten method
Example
Let's look at a code example to see what an Image object looks like when straighten Method used in conjunction with the angle property. Although we have set the angle Rotated to 45 degrees, our image object will straighten by rotating it back to 0 degree as we have used the straightening method.
<!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 straighten method</h2>
<p>
You can see that the angle of rotation is 0 degree for the image object
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
angle: 45,
});
// Add it to the canvas
canvas.add(image);
// Using the straighten method
image.straighten();
</script>
</body>
</html>
The above is the detailed content of How to straighten an Image object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!