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.
new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { imageSmoothing: Boolean }: Object, callback: function)
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.
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.
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>
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.
Fazit
<!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 kopierenIn 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!
