Home > Article > Web Front-end > How to set a multiplier to scale a cloned image using FabricJS?

How to set a multiplier to scale a cloned image using FabricJS?

王林forward: 2023-08-27 19:21:10630browse

如何使用 FabricJS 设置倍数来缩放克隆图像？

In this tutorial, we will learn how to set a multiplier to scale a cloned image 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 set the multiplier to scale the cloned image, we use the multiplier property.

grammar

cloneAsImage( callback: function, { multiplier: Number}: Object): fabric.Object

parameter

Callback (optional) - This parameter is a function that will use the cloned image instance as the first call argument.
Options (optional) - This parameter is an optional object that provides additional customization to our cloned image. Using this parameter we can set the multiplier, crop the cloned image, remove the current object transform or can change many properties where Multiplier is a property.

Option key

multiplier - This property accepts a Number value that represents the multiplier by which the final output image is scaled. The default value is 1.

Do not use multiplierAttribute

Example

Let's look at a code example to see how a cloned Image object displays when the multiplier property is not used. In this case, the default multiplier value of 1 is used.

<!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>Without using the multiplier property</h2> 
   <p>You can see that the clone image uses the default multiplier</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(function (Img) {
         canvas.add(Img);
      });
   </script>
</body>
</html>

Use MultiplierProperties

Example

In this example, we used the multiplier property and passed it a value of 2 to demonstrate that the final cloned image will be scaled twice in the x and y directions.

<!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 multiplier property</h2>
   <p>You can see that the clone image has been scaled</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      // Using cloneAsImage method
      image.cloneAsImage(
         function (Img) {
            Img.set("top", 90);
            canvas.add(Img);
         },
         {
            multiplier: 2,
         }
      );
   </script>
</body>
</html>

The above is the detailed content of How to set a multiplier to scale a cloned image using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to write shorthand for document.getElementById() method in JavaScript?Next article：How to write shorthand for document.getElementById() method in JavaScript?

See more

How to set a multiplier to scale a cloned image using FabricJS?

grammar

parameter

Option key

Do not use multiplierAttribute

Example

Use MultiplierProperties

Example

Related articles