FabricJS - How to scale an image evenly horizontally and vertically?-JS Tutorial-php.cn

FabricJS - How to scale an image evenly horizontally and vertically?

WBOY

Release： 2023-09-06 21:29:07

forward

978 people have browsed it

FabricJS – 如何在水平和垂直方向上均匀缩放图像？

In this tutorial, we will learn how to scale an image evenly both horizontally and vertically 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 the image evenly in both horizontal and vertical directions, we use the scale method.

grammar

scale(value: Number): fabric.Object

Copy after login

parameter

scale - This parameter accepts a Number, which is used to set the scale factor of the image object.

Default appearance of Image object

Example

Let's look at a code example to see what our image object looks like without using the scale method. In this case, our image object will not scale horizontally and 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 scale method

Example

In this example, we will now see that a value is being assigned to the scale method, which scales our image object equally horizontally and vertically. Since we've passed the value as 2, that's the scale factor to consider now.

<!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 scale method with a custom value</h2>
   <p>
      You can see that the object has been scaled in horizontal and 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,
      });
      
      // Using the scale method
      image.scale(2);
      
      // 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 evenly horizontally and vertically?. For more information, please follow other related articles on the PHP Chinese website!