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

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

WBOY

Release： 2023-09-15 21:13:06

forward

984 people have browsed it

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

In this tutorial, we will learn how to scale an Image object to a given width 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 width, we use the scaleToWidth method.

grammar

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

Copy after login

parameter

value - This parameter accepts a Number, which determines the new width 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 an image object looks like without using the scaleToWidth 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

Pass using custom value scaleToWidth Method

Example

In this example we will see how to scale an image object to a given width by assigning a value to the scaleToWidth method. Since we have passed the value as 200, this will be the new width 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 scaleToWidth method with a custom value</h2>
   <p>You can see that the new width of our image object is 200</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 scaleToWidth method
      image.scaleToWidth(200, 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 width?. For more information, please follow other related articles on the PHP Chinese website!