Bildverarbeitung

Dieser Artikel bietet einige Anwendungsfälle, um zu zeigen, wie man Bilder in der Größe ändert, zuschneidet, einpasst, füllt und ausrichtet.

Größenänderung von Bildern

Wir verwenden die URL-Abfrage von Bildern, um die Größe von Bildern zu ändern. Zum Beispiel:

Geben Sie die Breite und das Beibehaltungsverhältnis an

1![Resize](featured-sample.webp?width=300px)

Geben Sie die Höhe und das Beibehaltungsverhältnis an

1![Resize](featured-sample.webp?height=200px)

Geben Sie die Breite und Höhe an

1![Resize](featured-sample.webp?width=300px&height=200px)

Es kann nicht nur für Seitenressourcen verwendet werden, sondern auch für statische Bilder und externe Bilder. Zusätzlich zu den Seitenressourcen werden jedoch auch andere durch den Inline-Stil in der Größe geändert, d. h. ihre ursprüngliche Größe ändert sich nicht.

Bilder ausrichten

Wir können Bilder einfach ausrichten, indem wir URL-Fragmente hinzufügen. Beispielsweise stehen #center, #float-start und #float-end für die Ausrichtungsmitte, den Float-Anfang und das Float-Ende.

Mitte

Hinzufügen des #center-Fragments zum Ausrichten von Bildern in der Mitte.

Zum Beispiel: @@P2@@.

Float-Start

Zum Beispiel.

1{{/% clearfix %/}}
2![Float Start](/featured-sample.webp#float-start) TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}

Float-Ende

Zum Beispiel.

1{{/% clearfix %/}}
2![Float End](/featured-sample.webp#float-end) TEXTS AROUNDS THE IMAGE.
3{{/% /clearfix %/}}

Bildunterschrift

HBS erlaubt die Verwendung von Bildtiteln als Bildunterschrift. Diese Funktion ist standardmäßig deaktiviert. Sie müssen den Parameter post.imageTitleAsCaption aktivieren:

1[Beitrag]
2  imageTitleAsCaption = 'wahr'

1Beitrag:
2  imageTitleAsCaption: wahr

1{
2   "Beitrag": {
3      "imageTitleAsCaption": "wahr"
4   }
5}

1![Image Caption](/featured-sample.webp "Use Image Title as Caption")

Bilder zuschneiden

Schneiden Sie ein Bild zu, um es an die angegebenen Abmessungen anzupassen, ohne die Größe zu ändern. Sie müssen sowohl Breite als auch Höhe angeben. Verwenden Sie die Option „Anker¹“, um den Ankerpunkt des Zuschneidefelds zu ändern.

1![Crop Image](/featured-sample.webp?crop=[width]x[height],[anchor])

• Die Größe [width]x[height] ist erforderlich.
• [anchor] ist optional, das , wird verwendet, um die Größe und den Anker zu trennen.

Beispiele

Bilder füllen

Schneiden Sie ein Bild zu und ändern Sie seine Größe, damit es den angegebenen Abmessungen entspricht. Sie müssen sowohl Breite als auch Höhe angeben. Verwenden Sie die Option „Anker¹“, um den Ankerpunkt des Zuschneidefelds zu ändern.

1![Fill Image](/featured-sample.webp?fill=[width]x[height],[anchor])

• Die Größe [width]x[height] ist erforderlich.
• [anchor] ist optional, das , wird verwendet, um die Größe und den Anker zu trennen.

Beispiele

Bilder anpassen

Skalieren Sie ein Bild herunter, um es an die angegebenen Abmessungen anzupassen und dabei das Seitenverhältnis beizubehalten. Sie müssen sowohl Breite als auch Höhe angeben.

1![Fit Image](/featured-sample.webp?fit=[width]x[height])

Filter

Helligkeit

Das brightness muss im Bereich (-100, 100) liegen.

1![Image Brightness](/featured-sample.webp?brightness=-30)

Farbbalance

ColorBalance erstellt einen Filter, der die Farbbalance eines Bildes ändert. Die prozentualen Parameter für jeden Farbkanal (Rot, Grün, Blau) müssen im Bereich (-100, 500) liegen.

1![Image ColorBalance](/featured-sample.webp?colorBalance=-50,50,150)

Einfärben

Colorize erstellt einen Filter, der eine kolorierte Version eines Bildes erzeugt. Der Farbtonparameter ist der Winkel auf dem Farbkreis, typischerweise im Bereich (0, 360). Der Sättigungsparameter muss im Bereich (0, 100) liegen. Der Prozentparameter gibt die Stärke des Effekts an, er muss im Bereich (0, 100) liegen.

1![Image Colorize](/featured-sample.webp?colorize=-100,50,150)

Kontrast

Das contrast muss im Bereich (-100, 100) liegen.

1![Image Contrast](/featured-sample.webp?contrast=50)

Gamma

Gamma erstellt einen Filter, der eine Gammakorrektur an einem Bild durchführt. Der Gamma-Parameter muss positiv sein. Gamma = 1 ergibt das Originalbild. Bei einem Gammawert unter 1 wird das Bild dunkler, bei einem Gammawert über 1 wird es heller.

1![Image Gamma](/featured-sample.webp?gamma=2)

GaussianBlur

Wendet eine Gaußsche Unschärfe auf ein Bild an.

1![Image GaussianBlur](/featured-sample.webp?gaussianBlur=2)

Graustufen

Grayscale erstellt einen Filter, der eine Graustufenversion eines Bildes erzeugt.

1![Image Grayscale](/featured-sample.webp?grayscale)

Farbton

„Hue“ erstellt einen Filter, der den Farbton eines Bildes dreht. Die Farbtonwinkelverschiebung liegt typischerweise im Bereich -180 bis 180.

1![Image Hue](/featured-sample.webp?hue=90)

Invertieren

Invertieren erstellt einen Filter, der die Farben eines Bildes negiert.

1![Image Invert](/featured-sample.webp?invert)

Pixelieren

Pixelate erstellt einen Filter, der einen Pixelierungseffekt auf ein Bild anwendet.

1![Image Pixelate](/featured-sample.webp?pixelate=8)

Sättigung

„Sättigung“ erstellt einen Filter, der die Sättigung eines Bildes ändert.

1![Image Saturation](/featured-sample.webp?saturation=100)

Sepia

Sepia erstellt einen Filter, der eine sepiafarbene Version eines Bildes erzeugt.

1![Image Sepia](/featured-sample.webp?sepia=200)

Sigmoid

Sigmoid erstellt einen Filter, der den Kontrast eines Bildes mithilfe einer Sigmoidfunktion ändert und das angepasste Bild zurückgibt. Es handelt sich um eine nichtlineare Kontraständerung, die für Fotoanpassungen nützlich ist, da sie die Details von Lichtern und Schatten beibehält.

1![Image Sigmoid](/featured-sample.webp?sigmoid=2,5)

UnsharpMask

UnsharpMask erstellt einen Filter, der ein Bild schärfer macht. Der Sigma-Parameter wird in einer Gaußschen Funktion verwendet und beeinflusst den Wirkungsradius. Sigma muss positiv sein. Der Schärfradius entspricht ungefähr 3 * Sigma. Der Parameter „Menge“ steuert, wie viel dunkler und wie viel heller die Kantenränder werden. Typischerweise zwischen 0.5 und 1.5. Der Schwellenwertparameter steuert die minimale Helligkeitsänderung, die geschärft wird. Typischerweise zwischen 0 und 0.05.

1![Image UnsharpMask](/featured-sample.webp?unsharpMask=10,1,0.05)