Comment créer une instance de Fabric.Image à partir d'une chaîne URL à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer une instance de Fabric.Image à partir d'une chaîne URL à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-24 14:09:11

avant

1900 Les gens l'ont consulté

如何使用 FabricJS 从 URL 字符串创建 Fabric.Image 的实例？

Dans ce tutoriel, nous apprendrons comment partir de Chaîne d'URL utilisant FabricJS. Nous pouvons créer un objet Image en créant une instance Tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. afin de créer Fabric.Image à partir d'une chaîne d'URL, nous utilisons la méthode fromURL.

Grammaire

fromURL(url: String, callback: function, imgOptions: Object)

Copier après la connexion

Paramètres

url - Ce paramètre accepte une chaîne représentant l'URL à partir de laquelle l'image a été créée.
rappel (facultatif) - Ce paramètre est une fonction qui est appelée immédiatement après la création de l'image. Pour cette fonction, l'image nouvellement créée est passée comme premier paramètre. Le deuxième paramètre est une valeur booléenne indiquant si une erreur s'est produite. Ce paramètre est facultatif.
imgOptions (facultatif) - Ce paramètre est un objet facultatif qui fournit une personnalisation supplémentaire à notre image. Utilisez ce paramètre pour modifier l'origine, la largeur du trait et de nombreuses autres propriétés associées à l'objet image.

Ne pas utiliser la méthode fromURL

Exemple

Regardons un exemple de code pour voir comment un objet Image est affiché lors de l'utilisation de la méthode fromURL Non utilisé. Dans ce cas, il nous suffit de créer une instance de fabric.Image et de l'ajouter à notre toile.

<!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 fromURL method</h2>
   <p>You can see that the image object has been added to the canvas</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 an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode fromURL

Exemple

Dans cet exemple, nous avons utilisé la méthode fromURL pour démontrer que nous pouvons créer Même si nous n’avons pas d’élément image, c’est un objet image. Dans ce cas, nous avons juste besoin Nécessite l'URL de l'image et transmet la fonction de rappel créée fabric.Image objet comme premier paramètre, puis ajoutez-le au canevas.

<!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 fromURL method</h2>
   <p>
      You can see that the image object can be created from the image URL itself
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Calling fabric.Image.fromURL and passing the url of our desired image
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function(Img) {
            canvas.add(Img);
         }
      );
   </script>
</body>
</html>

Copier après la connexion