search

Home  >  Article  >  Web Front-end  >  How to create a cloned image object using FabricJS?

How to create a cloned image object using FabricJS?

PHPz
PHPzforward
2023-08-24 09:01:25652browse

如何使用 FabricJS 创建克隆图像对象？

In this tutorial we will show how to create a cloned image object 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 and we can also customize it easily through the application Angle, opacity and other properties. To create a cloned image object we use cloneAsImage method.

grammar

cloneAsImage(callback: function, options: 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 or remove the current object transform.

Do not use cloneAsImagemethod

Example

Let's look at a code example to understand how an Image object appears when cloneAsImage Method is not used. In this case, an instance of fabric.Image itself will appear in our canvas. 

<!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 cloneAsImage method</h2>
   <p>You can see that the image instance has been formed</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,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Use cloneAsImageMethod

Example

In this example, we used the cloneAsImage method to demonstrate that we can Use the callback method to create a clone of the fabric.Image instance. we will further add that cloned image to the canvas. 

<!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 cloneAsImage method</h2>
   <p>You can see that a clone image instance has been formed</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>

in conclusion

In this tutorial, we use two examples to demonstrate how to create cloned image objects using FabricJS.

The above is the detailed content of How to create a cloned image object 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 create a chart from JSON data using the Fetch API in JavaScript?Next article：How to create a chart from JSON data using the Fetch API in JavaScript?

Related articles

See more