Home > Article > Web Front-end > How to identify the type of Image instance using FabricJS?

How to identify the type of Image instance using FabricJS?

WBOYforward: 2023-09-08 12:29:02949browse

In this tutorial, we will learn how to identify the type of Image instance in 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 identify the type of an Image instance, we use the isType method.

grammar

isType(type: String): Boolean

parameter

type - This parameter accepts a String which specifies the type we want to check.

Use isTypemethod

Example

Let's look at a code example to see the output logged when using the isType method. The isType method returns a true or false value, depending on whether the instance's type matches the type we want to check. In this case, since the types match, a true value is returned.

<!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 isType method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a true value
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to identify the type of Image instance using FabricJS?" >
   <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);
      
      // Using isType method
      console.log(
         "Is the specified type identical to an image instance? : ",
         image.isType("image")
      );
   </script>
</body>
</html>

Using the isType method with different values

Example

In this example, we use isType to check if the specified circle type is the same as the image instance. Here, since they are not the same, an error value is returned.

<!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 isType method with a different value</h2>
   <p>
      You can open console from dev tools and see that the logged output contains a false value
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to identify the type of Image instance using FabricJS?" >
   <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);
      
      // Using isType method
      console.log(
         "Is the specified type identical to an image instance? : ",
         image.isType("circle")
      );
   </script>
</body>
</html>

The above is the detailed content of How to identify the type of Image instance using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

String 对象 fabric

Statement：

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

Previous article：Magic Strings: Problems in JavaScriptNext article：Magic Strings: Problems in JavaScript

See more

How to identify the type of Image instance using FabricJS?

grammar

parameter

Use isTypemethod

Example

Using the isType method with different values

Example

Related articles