FabricJS - Comment changer le format de la chaîne URL d'un objet Line ?-js tutoriel-php.cn

FabricJS - Comment changer le format de la chaîne URL d'un objet Line ?

王林

Libérer： 2023-08-30 10:13:05

avant

709 Les gens l'ont consulté

FabricJS – 如何更改 Line 对象的 URL 字符串的格式？

Dans ce tutoriel, nous allons apprendre à changer le format d'une chaîne URL d'un objet Line à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de Fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour modifier le format de la chaîne URL d'un objet Line, nous utilisons la propriété format.

Grammaire

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

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire de la représentation URL de l'objet Ligne. La hauteur, la masse, le multiplicateur et bien d'autres propriétés peuvent être modifiées à l'aide de ce paramètre, dont format est une 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".

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

Exemple

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 à partir des outils de développement, nous pouvons voir la représentation URL de l'objet Line. 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 Line 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL());
   </script>
</body>
</html>

Copier après la connexion

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

Exemple

Regardons un exemple de code pour voir à quoi ressemble un objet Line 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 Line 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         angle: 70,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toDataURL method
      console.log(line.toDataURL({format: "jpeg"}));
   </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!