Comment définir le niveau de qualité de la chaîne URL d'un objet IText à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir le niveau de qualité de la chaîne URL d'un objet IText à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-24 11:33:16

avant

1325 Les gens l'ont consulté

如何使用 FabricJS 设置 IText 对象的 URL 字符串的质量级别？

Dans ce tutoriel, nous apprendrons comment définir le niveau de qualité dans la 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 définir le niveau de qualité dans la chaîne URL de l'objet IText à l'aide de l'attribut Quality.

Grammaire

toDataURL({ quality: Number }: Object): String

Copier après la connexion

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. Utilisez ce paramètre pour modifier la hauteur, la masse, le format et de nombreuses autres propriétés, dont la masse.

Touche d'option

quality - Cette propriété accepte une valeur Number qui représente le niveau de qualité de l'image de sortie finale. Les valeurs acceptables sont comprises entre 0 et 1, à l'exclusion de 0. 0,1 représente la pire qualité et 1 représente la meilleure qualité. Cette propriété est uniquement disponible pour le format jpeg. La valeur par défaut est 1.

Exemple 1

N'utilise pas d'attributs de qualité

Regardons un exemple de code pour voir l'image de sortie lorsque vous n'utilisez pas l'attribut de qualité. 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’utilisons pas l’attribut qualité, la valeur par défaut, qui est 1, sera utilisé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 quality property</h2>
   <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image </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: 310,
            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>

Copier après la connexion

Exemple 2

Utilisez des attributs de qualité

Regardons un exemple de code pour voir à quoi ressemble l'image de sortie finale d'un objet IText lors de l'utilisation de l'attribut qualité. Dans ce cas, on lui passe la valeur 0,1. Par conséquent, la qualité de l’image finale deviendra la pire.

<!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 quality property</h2>
   <p>You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the final image </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: 310,
            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", quality: 0.1 }));
   </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!