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

FabricJS - Comment définir le niveau de qualité dans la chaîne URL de l'objet Line ?

王林

Libérer： 2023-08-31 21:21:02

avant

531 Les gens l'ont consulté

FabricJS – 如何设置 Line 对象的 URL 字符串中的质量级别？

Dans ce tutoriel, nous apprendrons comment définir le niveau de qualité dans 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 définir le niveau de qualité dans la chaîne URL d'un objet Line, nous utilisons 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 de la représentation URL de l'objet Ligne. La hauteur, la masse, le format et bien d'autres propriétés peuvent être modifiées à l'aide de ce paramètre, dont mass est une propriété.

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é ne peut être utilisée qu'au format jpeg. La valeur par défaut est 1.

N'utilise pas l'attribut qualité

Exemple

Regardons un exemple de code pour voir l'image de sortie sans utiliser l'attribut quality. 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'utilisons pas l'attribut quality, 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 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 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

Utiliser QualitéPropriétés

Exemple

Regardons un exemple de code pour voir à quoi ressemble l'image de sortie finale d'un objet Line lors de l'utilisation de la propriété quality. Dans ce cas, nous lui avons transmis 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 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 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' ,  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!