Wie füge ich Bildern mit FabricJS eine Bildglättung hinzu?-js-Tutorial-php.cn

Wie füge ich Bildern mit FabricJS eine Bildglättung hinzu?

WBOY

Freigeben： 2023-08-24 13:53:11

nach vorne

1279 Leute haben es durchsucht

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

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihren Bildern eine Bildglättung hinzufügen Verwenden Sie FabricJS. Durch Glätten erhält ein Bild einen glättenden Effekt. Wir können ein Bild erstellen Erstellen Sie ein Objekt, indem Sie eine Instanz von fabric.Image erstellen. Weil es eines der Grundelemente ist Mit FabricJS können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um eine Bildglättung hinzuzufügen, verwenden wir das Attribut imageSmoothing.

Grammatik

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { imageSmoothing: Boolean }: Object, callback: function)

Nach dem Login kopieren

Parameter

element – Dieser Parameter akzeptiert ein HTMLImageElement-, HTMLCanvasElement-, HTMLVideoElement- oder String-Element, das ein Bild darstellt. Die Zeichenfolge sollte eine URL sein und wird als Bild geladen.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie den Ursprung, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Bildobjekt verknüpft sind, dessen imageSmoothing ein Attribut ist.
Callback (optional) – Dieser Parameter ist die Funktion, die aufgerufen wird, nachdem der endgültige Filter angewendet wurde.

Wahltaste

imageSmoothing – Diese Eigenschaft akzeptiert einen Boolean-Wert, der darstellt Ob die Leinwand beim Zeichnen von Bildern die Bildglättung verwendet. es ist Der Standardwert ist wahr.

Standarddarstellung von Bildobjekten

Beispiel

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie ein Bildobjekt beim imageSmoothing aussieht Eigentum wird nicht genutzt. In diesem Fall wird der Standardwert verwendet, der also wahr ist Die Leinwand nutzt die Bildglättung.

<!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>

Nach dem Login kopieren

Verwenden Sie das Attribut imageSmoothing und übergeben Sie ihm einen Wert „false“. Wert

Beispiel

In diesem Beispiel haben wir das Attribut „imageSmoothing“ verwendet und ihm „false“ zugewiesen Wert. Daher verwendet die Leinwand keine Bildglättung mehr zum Zeichnen des Bildes.

<!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>

Nach dem Login kopieren

Fazit
In diesem Tutorial zeigen wir anhand zweier Beispiele, wie das geht Bilder mit FabricJS
Das obige ist der detaillierte Inhalt vonWie füge ich Bildern mit FabricJS eine Bildglättung hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!