Home > Article > Web Front-end > How to crop the height of a cloned image using FabricJS?

How to crop the height of a cloned image using FabricJS?

WBOYforward: 2023-09-05 10:05:021459browse

如何使用 FabricJS 裁剪克隆图像的高度？

In this tutorial we will learn how to crop height from a cloned image using the following method FabricJS. We can create an Image object by creating an instance of fabric.Image. since It is one of the basic elements of FabricJS and we can also customize it easily through the application Angle, opacity and other properties. To crop the height in the cloned image, we use HeightAttribute.

grammar

cloneAsImage( callback: function, { height: 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 other properties, where height is a property.

Option key

##height - This property accepts a Number value, indicating cropping high. This attribute is optional.

Do not use

heightproperty

Example

Let's look at a code example to see how a cloned Image object displays when

height Property is not used. In this case, the cloned image will not be cropped.

<!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 height property</h2>
   <p>You can see that no cropping has been applied to the clone image</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", 150);
         Img.set("left", 150);
         canvas.add(Img);
      });
   </script>
</body>
</html>

Using

HeightProperties

Example

In this example, we used the

height property and passed it the value 50, which is Crop Height. Therefore, the height will be clipped.

<!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 height property</h2>
   <p>You can see that cropping has been applied to the clone image</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", 150);
            Img.set("left", 150);
            canvas.add(Img);
         }, {
            height: 50,
          }
       );
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two examples to demonstrate how to crop the height in a clone Generate images using FabricJS.

The above is the detailed content of How to crop the height of 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：Nightmare.js introduction and installationNext article：Nightmare.js introduction and installation

See more