Maison > Article > interface Web > FabricJS - Comment définir le niveau de qualité dans la chaîne URL de l'objet Line ?
FabricJS - Comment définir le niveau de qualité dans la chaîne URL de l'objet Line ?
- 王林avant
- 2023-08-31 21:21:02479parcourir
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
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>
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>
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!