Maison >interface Web >js tutoriel >Comment changer le format de la chaîne URL d'un objet IText à l'aide de FabricJS ?

Comment changer le format de la chaîne URL d'un objet IText à l'aide de FabricJS ?

WBOYavant: 2023-09-07 12:45:02510parcourir

Comment changer le format de la chaîne URL dun objet IText à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment changer le format d'une chaîne URL d'un objet IText à l'aide de FabricJS. La classe IText a été introduite dans FabricJS version 1.4, qui étend Fabric.Text et est utilisée pour créer des instances IText. Les instances IText nous donnent la liberté de sélectionner, couper, coller ou ajouter un nouveau texte sans configuration supplémentaire. Il existe également diverses combinaisons de touches et combinaisons souris/tactile prises en charge pour rendre le texte interactif qui ne sont pas disponibles dans Texte.

Cependant, Textbox basé sur IText nous permet de redimensionner le rectangle de texte et de l'envelopper automatiquement. Ce n'est pas le cas pour IText, car la hauteur ne s'ajuste pas en fonction des sauts de ligne. Nous pouvons manipuler des objets IText en utilisant diverses propriétés. De même, nous pouvons utiliser la propriété format pour modifier le format de la chaîne URL de l'objet IText.

Grammaire

toDataURL({ format: String }: Object): String

Paramètres

options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire pour la représentation URL de l'objet IText. La hauteur, la masse, le multiplicateur et bien d'autres propriétés peuvent être modifiées à l'aide de ce paramètre, où le format est la propriété

Touche d'option

format - Cette propriété accepte une valeur String qui nous permet de définir le format de l'image de sortie. Les valeurs acceptées sont « jpeg » ou « png ». La valeur par défaut est "png".

Exemple 1

N'utilisez pas la valeur par défaut de l'attribut format

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toDataURL sans utiliser l'attribut format. Une fois que nous ouvrons la console depuis les outils de développement, nous pouvons voir la représentation URL de l'objet IText. Nous pouvons copier l'URL et la coller dans la barre d'adresse d'un nouvel onglet pour voir le résultat final. Puisque nous n'avons pas spécifié le format de l'image, elle sera basée sur la valeur par défaut "png".

<!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>Default value without using the format property</h2>
   <p> You can open console from dev tools and see that the URL representation of the IText object has a "png" format by default </p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL());
   </script>
</body>
</html>

Exemple 2

Utilisez la méthode toDataURL et l'attribut de format

Regardons un exemple de code pour voir à quoi ressemble un objet IText lorsque la méthode toDataURL est utilisée avec la propriété format. Dans ce cas nous pourrons préciser le format de l'image finale. Puisque la valeur attribuée ici est "jpeg", l'image finale sera au format "jpeg".

<!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 toDataURL method along with format property</h2>
   <p> You can open console from dev tools and see that the URL representation of the IText object has a "jpeg" format now </p>
   <canvas id="canvas"></canvas>
   
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         blur: 25,
         color: "grey",
         offsetX: 12,
         offsetY: 15,
      });

      // Initiate an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet consectetur adipiscing.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "#c70039",
            backgroundColor: "#c1dfed",
            stroke: "#c70039",
            originX: "center",
            shadow: shadow,
         }
      );

      // Add it to the canvas
      canvas.add(itext);

      // Using the toDataURL method
      console.log(itext.toDataURL({format: "jpeg"}));
   </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!

String format 字符串对象 fabric

Déclaration：

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

Article précédent：Comment définir une clé personnalisée pour activer/désactiver la mise à l'échelle unifiée sur le canevas FabricJS ?Article suivant：Comment définir une clé personnalisée pour activer/désactiver la mise à l'échelle unifiée sur le canevas FabricJS ?

Articles Liés

Voir plus