Maison > Article > interface Web > Comment recadrer la largeur d'une image clonée à l'aide de FabricJS ?

Comment recadrer la largeur d'une image clonée à l'aide de FabricJS ?

王林avant: 2023-08-24 14:09:061048parcourir

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

Dans ce tutoriel, nous apprendrons comment recadrer la largeur d'une image clonée en utilisant TissuJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. depuis C'est l'un des éléments de base de FabricJS et nous pouvons également le personnaliser facilement via l'application Angle, opacité et autres propriétés. Pour recadrer la largeur dans l'image clonée, nous utilisons LargeurPropriété

Grammaire

cloneAsImage( callback: function, { width: Number}: Object): fabric.Object

Paramètres

Callback (facultatif) - Ce paramètre est une fonction qui sera appelée avec l'instance d'image clonée comme premier paramètre.
Options (facultatif) - Ce paramètre est un objet facultatif qui fournit une personnalisation supplémentaire à notre image clonée. En utilisant ce paramètre, nous pouvons définir un multiplicateur, recadrer l'image clonée, supprimer la transformation de l'objet actuel ou modifier de nombreuses autres propriétés, dont width est une propriété.

Touche d'option

width - Cette propriété accepte une valeur Number, représentant la width du recadrage. Cet attribut est facultatif.

N'utilisez pas l'attribut width

Exemple

Regardons un exemple de code pour voir comment un objet Image cloné s'affiche lorsque largeur La propriété n'est pas utilisée. Dans ce cas, l’image clonée ne sera pas recadré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>Without using the width 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);
         canvas.add(Img);
      });
   </script>
</body>
</html>

Utilisez la propriété width

Exemple

Dans cet exemple, nous avons utilisé l'attribut width et lui avons passé la valeur 245 qui est Recadrer Largeur. Par conséquent, la largeur sera rogné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 width 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);
         }, {
            width: 245,
         }
      );
   </script>
</body>
</html>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment ignorer des éléments dans .map() ?Article suivant：Comment ignorer des éléments dans .map() ?

Articles Liés

Voir plus