Comment ajouter un lissage d'image aux images à l'aide de FabricJS ?-js tutoriel-php.cn

Comment ajouter un lissage d'image aux images à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-24 13:53:11

avant

1210 Les gens l'ont consulté

如何使用 FabricJS 为图像添加图像平滑？

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)

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion