Maison > Article > interface Web > Comment ajouter un lissage d'image aux images à l'aide de FabricJS ?
Comment ajouter un lissage d'image aux images à l'aide de FabricJS ?
- WBOYavant
- 2023-08-24 13:53:111188parcourir
Dans ce tutoriel, nous allons vous montrer comment ajouter un lissage d'image à vos images Utilisez FabricJS. Le lissage donne à une image un effet lisse. Nous pouvons créer une image Créez un objet en créant une instance de fabric.Image. Parce que c'est l'un des éléments de base Avec FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour ajouter un lissage d'image, nous utilisons l'attribut imageSmoothing.
Grammaire
new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { imageSmoothing: Boolean }: Object, callback: function)
Paramètres
element - Ce paramètre accepte un élément HTMLImageElement, HTMLCanvasElement, HTMLVideoElement ou String représentant une image. La chaîne doit être une URL et sera chargée sous forme d'image.
Options (facultatif) - Ce paramètre est un objet qui apporte une personnalisation supplémentaire à notre objet. En utilisant ce paramètre, vous pouvez modifier l'origine, la largeur du trait et de nombreuses autres propriétés associées à l'objet image dont imageSmoothing est un attribut.
Callback (facultatif) - Ce paramètre est la fonction appelée après l'application du filtre final.
Touche d'option
imageSmoothing - Cette propriété accepte une valeur Boolean, représentant Indique si le canevas utilise le lissage d'image lors du dessin d'images. c'est La valeur par défaut est vraie.
Apparence par défaut des objets image
Exemple
Regardons un exemple de code pour voir comment un objet Image apparaît lorsque imageSmoothing La propriété n'est pas utilisée. Dans ce cas, la valeur par défaut est utilisée, ce qui est vrai, donc Le canevas utilisera le lissage de l’image.
<!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 appearance of Image object</h2>
<p>You can see that image smoothing has been applied by default</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Utilisez l'attribut imageSmoothing et transmettez-lui un false Valeur
Exemple
Dans cet exemple, nous avons utilisé l'attribut imageSmoothing et lui avons attribué false valeur. Par conséquent, le canevas n’utilisera plus le lissage de l’image pour dessiner l’image.
<!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 imageSmoothing property and passing it a false value</h2>
<p>You can see that image smoothing is no longer functioning</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
imageSmoothing: false,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Conclusion
Dans ce tutoriel, nous utilisons deux exemples pour montrer comment Images utilisant FabricJS
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!