FabricJS - How to scale an image object to a given height?-JS Tutorial-php.cn

FabricJS - How to scale an image object to a given height?

WBOY

Release： 2023-09-10 19:13:02

forward

1400 people have browsed it

FabricJS – 如何将图像对象缩放到给定高度？

In this tutorial, we will learn how to scale an Image object to a given height using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc. To scale an Image object to a given height, we use the scaleToHeight method.

grammar

scaleToHeight(value: Number, absolute: Boolean): fabric.Object

Copy after login

parameter

value - This parameter accepts a Number, which determines the new height value of the Image object.
< /里>
absolute - This parameter accepts a boolean value that determines whether the viewport is ignored.

Default appearance of Image object

Example

Let's look at a code example to see what the image object looks like without using the scaleToHeight method. In this case, our image object will not scale horizontally or vertically.

<!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 appearance of the Image object</h2>
   <p>
      You can see that the object has not been scaled in horizontal or vertical direction
   </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,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

Use custom value to pass scaleToHeight Method

Example

In this example, we will see how to scale an image object to a given height by assigning a value to the scaleToHeight method. Since we have passed the value as 100, this will be the new height of the image 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>Passing the scaleToHeight method with a custom value</h2>
   <p>You can see that the new height of our image object is 100</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,
      });
      
      // Using scaleToHeight method
      image.scaleToHeight(100, false);
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of FabricJS - How to scale an image object to a given height?. For more information, please follow other related articles on the PHP Chinese website!