Comment obtenir le code source d'une image en utilisant FabricJS ?-js tutoriel-php.cn

Comment obtenir le code source d'une image en utilisant FabricJS ?

王林

Libérer： 2023-08-22 12:17:02

avant

1350 Les gens l'ont consulté

Comment obtenir le code source dune image en utilisant FabricJS ?

Dans ce tutoriel, nous allons apprendre comment obtenir la source de l'image à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés comme l'angle, l'opacité, etc. Afin de trouver la source d'une image, nous utilisons la méthode getSrc.

Syntaxe

getSrc(filtered: Boolean): String

Copier après la connexion

Paramètres

filtered − Ce paramètre est une valeur Boolean qui indique si la source est nécessaire pour svg ou non.

Utilisation de la méthode getSrc

Exemple

Dans cet exemple, nous avons utilisé la méthode getSrc pour obtenir la source originale de l'image. On peut voir dans la console qu'une représentation String de la source de l'image est renvoyée.

<!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 getSrc method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </p> 
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Comment obtenir le code source d'une image en utilisant 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,
         skewX: 15,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getSrc method
      console.log("The Source of the image is: ", image.getSrc(false));
   </script>
</body>
</html>

Copier après la connexion

Utilisation de la méthode getSrc avec la méthode fromURL

Exemple

Voyons un exemple de code de la sortie enregistrée lorsque la méthode getSrc est utilisée en conjonction avec la méthode fromURL.

<!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 getSrc method along with fromURL method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Using fromURL method
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function (Img) {
            canvas.add(Img);
            
            // Using getSrc method
            console.log("The Source of the image is: ", Img.getSrc(false));
         }
      );
   </script>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!