Home > Article > Web Front-end > FabricJS - How to scale an image evenly horizontally and vertically?

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

WBOYforward: 2023-09-06 21:29:07954browse

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

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>

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>

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!

值传递 number 对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to call a function with partial prefix parameters in JavaScript?Next article：How to call a function with partial prefix parameters in JavaScript?

See more

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

grammar

parameter

Default appearance of Image object

Example

Use custom value to pass scale method

Example

Related articles