Übersicht API-Referenz Compile Dokumentation Effekte Beispiele Math Download

Effekte-Referenz

Automatisch aus den Quellen abgeleitet. Alle Bildoperationen der JavaScript-Engine auf einen Blick. Englische Version: docs/effects.md

Inhaltsverzeichnis

Farbe & Ton

brightness — Helligkeit

Multipliziert die Helligkeit jedes Pixels mit einem Faktor. Werte > 1 hellen auf, Werte < 1 verdunkeln. Der Alpha-Kanal bleibt erhalten.

Mehr Infos: Helligkeit (Fotografie) – Wikipedia

Parameter Typ Standard Beschreibung
factor Zahl — Multiplikator (0,5 = halb so hell, 2,0 = doppelt so hell)
rect Rect? gesamt Normierter [x,y,b,h] Bereich, auf den der Effekt angewendet wird 
JS:   img.brightness(1.1)
      img.brightness(1.1, img.rectFromPixels(0, 0, 200, 200))

contrast — Kontrast

Verstärkt den lokalen Kontrast, indem der Helligkeitsbereich vom Mittelpunkt (0,5) weg gespreizt wird. Werte > 1 erhöhen den Kontrast; Werte nahe 0 glätten das Bild zu Grau.

Mehr Infos: Kontrast – Wikipedia

Parameter Typ Standard Beschreibung
factor Zahl — Kontraststärke (1,0 = unverändert)
rect Rect? gesamt Normierter Bereich 
JS:   img.contrast(1.15)

saturation — Sättigung

Skaliert die Farbsättigung. 0 = Graustufen, 1 = unverändert, > 1 = kräftigere Farben. Die Luminanz bleibt erhalten.

Mehr Infos: Farbsättigung – Wikipedia

Parameter Typ Standard Beschreibung
factor Zahl — Sättigungsfaktor
rect Rect? gesamt Normierter Bereich 
JS:   img.saturation(1.2)

hue — Farbton

Dreht alle Farbtöne auf dem HSL-Farbkreis um den angegebenen Winkel in Grad. 180° ergibt Komplementärfarben, 360° ist eine vollständige Rückkehr zum Original.

Parameter Typ Standard Beschreibung
delta Zahl — Drehwinkel in Grad (−360 … +360)
rect Rect? gesamt Normierter Bereich 
JS:   img.hue(30)

invert — Invertieren

Invertiert alle Farbkanäle: Jeder Wert v wird zu 1 − v. Erzeugt einen fotografischen Negativ-Effekt. Der Alpha-Kanal bleibt erhalten.

Parameter Typ Standard Beschreibung
rect Rect? gesamt Normierter Bereich 
JS:   img.invert()

grayscale — Graustufen

Wandelt das Bild in Graustufen um, gewichtet nach Wahrnehmungsluminanz (R 0,299 · G 0,587 · B 0,114). Alpha bleibt erhalten.

Parameter Typ Standard Beschreibung
rect Rect? gesamt Normierter Bereich 
JS:   img.grayscale()

sepia — Sepia

Wendet einen klassischen Sepia-Ton an: Zunächst Entsättigung, dann Einfärbung in warme Brauntöne — wie auf alten Fotografien.

Parameter Typ Standard Beschreibung
rect Rect? gesamt Normierter Bereich 
JS:   img.sepia()

threshold — Schwellwert

Wandelt das Bild in Schwarzweiß um: Pixel mit Luminanz über dem Schwellwert werden weiß, darunter schwarz. Siehe Schwellwertverfahren.

Parameter Typ Standard Beschreibung
value Zahl 0,5 Schwellwert ∈ [0..1]
rect Rect? gesamt Normierter Bereich 
JS:   img.threshold(0.5)

tint — Einfärben

Überblendet das Bild mit einer Volltonfarbe. Bei strength=0 bleibt das Original erhalten; bei strength=1 wird das Bild vollständig durch die Tintfarbe ersetzt.

Parameter Typ Standard Beschreibung
color Pixel|String — Zielfarbe als Pixel-Objekt oder CSS-Hex-String ("#rrggbb")
strength Zahl — Überblendungsanteil ∈ [0..1]
rect Rect? gesamt Normierter Bereich 
JS:   img.tint(new Pixel(0.1, 0.2, 0.8), 0.5)
      img.tint("#1a33cc", 0.5)

adjustAlpha — Alpha anpassen

Verändert den Alpha-(Transparenz-)Kanal jedes Pixels. Nützlich, um Bilder vor dem Compositing halbtransparent zu machen.

Parameter Typ Standard Beschreibung
value Zahl — Ziel-/Multiplikator-/Deltawert ∈ [0..1]
mode AlphaMode Set AlphaMode.Set = direkt setzen; Mul = multiplizieren; Add = addieren
rect Rect? gesamt Normierter Bereich 
JS:  img.adjustAlpha(0.7, AlphaMode.Set)   // 70% Deckkraft
     img.adjustAlpha(0.5, AlphaMode.Mul)   // halbiert bestehende Deckkraft

colorJitter / colorJiggle — Farb-Jitter

Verschiebt Helligkeit, Kontrast, Sättigung und Farbton jedes Pixels zufällig innerhalb der angegebenen Bereiche. Nicht-deterministisch — Ergebnis variiert bei jedem Aufruf. Geeignet für Data-Augmentation.

Parameter Typ Standard Beschreibung
brightness Zahl 0 Max. Helligkeitsabweichung
contrast Zahl 0 Max. Kontrastabweichung
saturation Zahl 0 Max. Sättigungsabweichung
hue Zahl 0 Max. Farbtonabweichung in Grad 
JS:   img.colorJitter(0.1, 0.1, 0.2, 10)

shadowsHighlights — Schatten & Lichter

Stellt Details in dunklen (Schatten) und hellen (Lichter) Bereichen unabhängig voneinander wieder her. Positiver shadows-Wert hebt Tiefen an; negativer highlights-Wert dämpft ausgebrannte Lichter, ohne die Mitteltöne stark zu beeinflussen.

Parameter Typ Standard Beschreibung
shadows Zahl 0 Schattenanhebung ∈ [0..1] (0 = keine Wirkung)
highlights Zahl 0 Lichterwiederherstellung ∈ [−1..0] (0 = keine Wirkung) 
JS:  img.shadowsHighlights({ shadows: 0.35, highlights: -0.25 })
Direktive: //!PARAM: SHADOWS:number=0.35, HIGHLIGHTS:number=-0.25

Filter

gaussianBlur / blur — Gauss-Weichzeichner

Weichzeichnung mit einem Gauss-Kern. Größeres Sigma = breiterer Unschärferadius. Reduziert Rauschen und feine Details; oft vor der Kantendetektion eingesetzt.

Parameter Typ Standard Beschreibung
sigma Zahl — Standardabweichung in Pixeln 
JS:   img.gaussianBlur(2.0)

boxBlur — Box-Unschärfe

Gleichmäßige Box-Unschärfe — mittelt alle Pixel in einem quadratischen Umfeld. Schneller als Gauss-Blur; die Kante des Unschärfebereichs ist etwas härter.

Parameter Typ Standard Beschreibung
size Zahl — Halbe Kernbreite in Pixeln 
JS:   img.boxBlur(5)

sharpen — Schärfen

Hebt feine Details mit Unschärfemaskierung hervor: Zieht eine unscharfe Version vom Original ab und addiert die verstärkte Differenz zurück.

Parameter Typ Standard Beschreibung
amount Zahl 1,0 Schärfungsstärke (typisch: 0,5 – 2,0) 
JS:   img.sharpen(1.5)

bilateralBlur — Bilateral-Filter

Bilateral-Filter — glättet Texturen und erhält scharfe Kanten. Im Gegensatz zum Gauss-Blur werden Pixel nach räumlicher Nähe und Farbähnlichkeit gewichtet.

Parameter Typ Standard Beschreibung
d Zahl 9 Durchmesser des Pixelumfelds
sigmaColor Zahl 75 Farbähnlichkeitsbereich (größer = mehr Glättung über Farbgrenzen)
sigmaSpace Zahl 75 Räumlicher Bereich 
JS:   img.bilateralBlur(9, 75, 75)

sobel — Sobel-Kantendetektion

Sobel-Operator — erkennt Kanten durch Berechnung des Bildgradienten in X- und Y-Richtung. Ausgabe ist eine Graustufen-Kantenkarte.

Keine Parameter

JS:   img.sobel()

canny — Canny-Kantendetektion

Canny-Algorithmus — mehrstufiger Algorithmus: Gauss-Glättung, Gradientenberechnung, Non-Maximum-Suppression und Hysterese-Schwellwertverfahren ergeben saubere, dünne Kanten.

Parameter Typ Standard Beschreibung
low Zahl 0,1 Unterer Hysterese-Schwellwert ∈ [0..1]
high Zahl 0,3 Oberer Hysterese-Schwellwert ∈ [0..1] 
JS:   img.canny(0.1, 0.3)

dither — Dithering

Floyd-Steinberg-Dithering — quantisiert das Bild auf Schwarzweiß und verteilt den Quantisierungsfehler auf benachbarte Pixel. Erzeugt ein Halbton-Muster, das weicher wirkt als einfaches Schwellwertverfahren.

Keine Parameter

JS:   img.dither()

dilate — Dilatation

Morphologische Dilatation — erweitert helle Bereiche, indem jedes Pixel durch das Maximum seines Umfelds ersetzt wird. Verdickt helle Linien und schließt kleine dunkle Lücken.

Parameter Typ Standard Beschreibung
size Zahl 1 Radius des Strukturelements in Pixeln 
JS:   img.dilate(2)

erode — Erosion

Morphologische Erosion — verkleinert helle Bereiche durch Ersatz mit dem Minimum des Umfelds. Dünnt helle Linien aus und vergrößert dunkle Lücken.

Parameter Typ Standard Beschreibung
size Zahl 1 Radius des Strukturelements in Pixeln 
JS:   img.erode(2)

filmGrain — Filmkorn

Fügt zufälliges Helligkeitsrauschen hinzu, um das Aussehen von fotografischem Filmkorn zu simulieren. Nicht-deterministisch — Ergebnis variiert bei jedem Aufruf.

Parameter Typ Standard Beschreibung
amount Zahl 0,05 Körnung-Intensität ∈ [0..1] 
JS:   img.filmGrain(0.08)

pixelate — Pixelierung

Pixelierungs- (Mosaik-)Effekt — unterteilt das Bild in quadratische Blöcke und füllt jeden mit der Durchschnittsfarbe des Blocks. Größerer size-Wert = gröberes Mosaik.

Parameter Typ Standard Beschreibung
size Zahl — Blockgröße in Pixeln 
JS:   img.pixelate(16)

posterize — Posterisierung

Posterisierung — reduziert die Anzahl unterschiedlicher Farbwerte pro Kanal auf levels, was ein flaches, plakatartiges Aussehen erzeugt.

Parameter Typ Standard Beschreibung
levels Zahl 4 Farbstufen pro Kanal (2 = extrem, 8 = subtil) 
JS:   img.posterize(4)

oilPaint — Ölmalerei

Ölmalerei-Effekt — ersetzt jeden Pixel durch die häufigste (dominante) Farbe seines Umfelds, was pinselstrichartige Flächen erzeugt. Größerer Radius = breitere Pinselstriche.

Parameter Typ Standard Beschreibung
radius Zahl 4 Pinselradius in Pixeln
levels Zahl 8 Intensitäts-Quantisierungsstufen 
JS:   img.oilPaint(4, 8)

solarize — Solarisation

Solarisation — invertiert Pixel, deren Luminanz den Schwellwert überschreitet. Erzeugt den surrealen Teilnegativ-Effekt, der vor allem durch Man Rays Dunkelkammer-Technik bekannt ist.

Parameter Typ Standard Beschreibung
threshold Zahl 0,5 Luminanz-Schwellwert ∈ [0..1] 
JS:   img.solarize(0.5)

Geometrie

resize — Skalieren

Skaliert das Bild auf die angegebenen Abmessungen. Breite oder Höhe kann 0 sein, um das Seitenverhältnis beizubehalten. Die Interpolationsmethode steuert Qualität vs. Geschwindigkeit.

Parameter Typ Standard Beschreibung
w Zahl — Zielbreite (0 = automatisch)
h Zahl — Zielhöhe (0 = automatisch)
interp Interp Bilinear Interp.Nearest / Bilinear / Bicubic 
JS:   img.resize(1280, 0, Interp.Bicubic)

crop — Zuschneiden

Schneidet einen rechteckigen Bereich aus und verwirft den Rest. Das Ausgabebild hat die Abmessungen w × h.

Parameter Typ Standard Beschreibung
x Zahl — Linke Kante in Pixeln
y Zahl — Obere Kante in Pixeln
w Zahl — Breite des Ausschnittbereichs
h Zahl — Höhe des Ausschnittbereichs 
JS:   img.crop(100, 50, 800, 600)

rotate — Drehen

Dreht das Bild ohne Änderung der Canvas-Größe. Pixel, die aus dem Bildbereich herausrotieren, werden abgeschnitten; leere Bereiche werden mit transparentem Schwarz gefüllt.

Parameter Typ Standard Beschreibung
angle Zahl — Drehwinkel in Grad (positiv = im Uhrzeigersinn) 
JS:   img.rotate(45)

rotateExpand — Drehen mit Canvas-Erweiterung

Wie rotate, aber der Canvas wird so vergrößert, dass der gedrehte Inhalt vollständig hineinpasst. Keine Pixel werden abgeschnitten; der umschließende Rahmen wird zur neuen Bildgröße.

Parameter Typ Standard Beschreibung
angle Zahl — Drehwinkel in Grad 
JS:   img.rotateExpand(30)

flipH / flipV — Spiegeln

Spiegelt das Bild horizontal (flipH, links↔rechts) oder vertikal (flipV, oben↔unten). Verlustfreie, pixelgenaue Operation.

Keine Parameter

JS:   img.flipH()   /   img.flipV()

pad — Auffüllen

Fügt einen Rand der angegebenen Breite um das Bild hinzu. Die Füllung kann eine Volltonfarbe (Pixel oder Hex-String) oder ein Modus aus BorderMode sein (Spiegeln, Kacheln, Kante replizieren).

Parameter Typ Standard Beschreibung
top Zahl — Oberer Rand in Pixeln
bottom Zahl — Unterer Rand
left Zahl — Linker Rand
right Zahl — Rechter Rand
color Color|BorderMode transparent Füllfarbe oder Randmodus 
JS:   img.pad(20, 20, 20, 20, "#000000")
      img.padTop(40, BorderMode.Reflect)

warp4 — 4-Punkt-Perspektive

Perspektivische Entzerrung mit vier Kontrollpunkten. Mappt ein Viereck im Quellbild auf ein Rechteck in der Ausgabe. Häufig zur Korrektur von Perspektivverzerrungen bei gescannten Dokumenten oder schräg aufgenommenen Fotos.

Parameter Typ Standard Beschreibung
p0 p1 p2 p3 x,y-Paare — Vier Eckpunkte im Quellbild (oben-links, oben-rechts, unten-rechts, unten-links) 
JS:   via img.warpPerspective() mit berechneter Homographie-Matrix

warpPerspective — Perspektiv-Warp

Niederlevel-Homographie-Warp mit einer 3×3-Matrix. Mappt Quell- auf Ziel-Pixelkoordinaten. warp4 und stampAt bieten eine höhere Abstraktionsebene.

Parameter Typ Standard Beschreibung
dw Zahl — Ausgabebreite
dh Zahl — Ausgabehöhe
matrix Zahl[9] — 3×3 zeilenbezogene Homographie-Matrix (src→dst)
interp Interp Bilinear Interpolationsmethode 
JS:  img.warpPerspective(800, 600, myMatrix, Interp.Bicubic)

warpPolar — Polartransformation

Polartransformation — bildet das Bild von kartesischen auf Polarkoordinaten ab und erzeugt eine Ring-/Donut-Form. Geeignet für kreisförmige Panoramen oder radiale Symmetrieextraktionen.

Parameter Typ Standard Beschreibung
innerR Zahl 0,3 Innerer Radiusanteil ∈ [0..1]
outSize Zahl 0 Ausgabegröße (0 = automatisch) 
JS:  img.warpPolar(0.2, 512)

fisheye — Fischauge

Fischauge-Verzeichnung — Tonnenverzeichnung des Bildes innerhalb eines kreisförmigen Bereichs, Pixel werden zur Randzone gedrückt. Der Effekt ist im Zentrum des Radius am stärksten.

Parameter Typ Standard Beschreibung
cx, cy Px Mitte Verzerrungsmittelpunkt (Pixelkoordinaten)
r Zahl — Radius in Pixeln
amount Zahl — Verzerrungsstärke (negativ = Kissenverzeichnung) 
JS:   img.fisheye(px(img.width/2, img.height/2), 200, 0.8)

swirl — Wirbel

Wirbel-/Strudel-Verzerrung — dreht Pixel innerhalb eines kreisförmigen Bereichs um einen Winkel, der vom Mittelpunkt nach außen abnimmt, und erzeugt ein Wirbelstrudelmuster.

Parameter Typ Standard Beschreibung
cx, cy Px Mitte Wirbelmittelpunkt
r Zahl — Radius in Pixeln
angle Zahl — Max. Drehwinkel im Zentrum in Grad 
JS:   img.swirl(px(img.width/2, img.height/2), 300, 90)

wave — Welle

Sinusförmige Wellenverzerrung — verschiebt die Position jedes Pixels mit Sinus-Funktionen in X und/oder Y und erzeugt einen Welleneffekt.

Parameter Typ Standard Beschreibung
amplitudeX Zahl 0 X-Verschiebungsamplitude in Pixeln
amplitudeY Zahl 0 Y-Verschiebungsamplitude in Pixeln
freqX Zahl 0 X-Frequenz in Zyklen/Breite
freqY Zahl 0 Y-Frequenz in Zyklen/Höhe 
JS:   img.wave(10, 5, 0.03, 0.02)

kaleidoscope — Kaleidoskop

Kaleidoskop-Effekt — spiegelt einen Tortenstück-Ausschnitt des Bildes um einen Mittelpunkt und wiederholt ihn segments-mal, was radial-symmetrische Muster erzeugt.

Parameter Typ Standard Beschreibung
cx, cy Px Mitte Mittelpunkt
segments Zahl 6 Anzahl Spiegelsegmente
rotation Zahl 0 Startwinkel des Segments in Grad 
JS:   img.kaleidoscope(px(img.width/2, img.height/2), 8, 0)

mirror — Spiegeln an Linie

Spiegelt das Bild über eine beliebige Linie, die durch zwei Punkte in normalisierten [0..1]-Koordinaten definiert wird. Alles auf einer Seite der Linie wird durch das Spiegelbild der anderen Seite ersetzt.

Parameter Typ Standard Beschreibung
x1, y1 Zahl — Erster Linienpunkt (normiert)
x2, y2 Zahl — Zweiter Linienpunkt (normiert)

Komposition

blend — Überblenden

Überblendung zweier gleich großer Bilder nach factor und optionalem Blend-Modus. factor=0 = Original unverändert; factor=1 = vollständig durch other ersetzt. Verschiedene Blend-Modi (Screen, Multiply, Overlay, …) folgen der Standard-Photoshop-Schichtsemantik.

Mehr Infos: Ebenen-Compositing – Wikipedia

Parameter Typ Standard Beschreibung
other ImageHandle — Zweites Bild
factor Zahl — Überblendungsfaktor ∈ [0..1]
mode BlendMode Normal Blend.Normal, Screen, Multiply, Overlay, Over, … 
JS:   img.blend(overlay, 0.5, Blend.Screen)

blendAt — Überblenden an Position

Compositet other auf this an einem angegebenen Pixel-Offset (x, y). Blend.Over (Porter-Duff) für alpha-bewusstes Compositing von Freiststellern verwenden. other darf über die Canvas-Grenzen hinausgehen.

Parameter Typ Standard Beschreibung
other ImageHandle — Zu kompositierendes Bild
pos Px — Pixel-Position oben links im Basisbild
factor Zahl 1,0 Deckkraft ∈ [0..1]
mode BlendMode Over Blend-Modus 
JS:  base.blendAt(overlay, px(80, 100), 0.9, Blend.Over)

stampAt — Perspektivisches Stempeln

Perspektivisches Stempeln von other auf this durch Berechnung der Homographie, die die vier Ecken von other auf die vier Zielpunkte abbildet. Unterstützt beliebige Vierecke als Ziel.

Parameter Typ Standard Beschreibung
other ImageHandle — Zu stempelndes Bild
pts Px[4] — Ziel-Eckpunkte: oben-links, oben-rechts, unten-rechts, unten-links 
JS:  canvas.stampAt(face, [px(x0,y0), px(x1,y1), px(x2,y2), px(x3,y3)])

applyMask — Maske anwenden

Wendet ein Graustufen-Maskenbild auf den Alpha-Kanal an. Helle Maskenpixel → opak; dunkle Pixel → transparent. Ermöglicht nicht-rechteckige Freistellungen und weiche Kanten.

Parameter Typ Standard Beschreibung
mask ImageHandle — Graustufen-Maskenbild 
JS:  img.applyMask(maskImage)

montageH / montageV — Zusammenfügen

Fügt Bilder horizontal nebeneinander (montageH) oder vertikal untereinander (montageV) zusammen. Alle Bilder sollten die gleiche Abmessung in der senkrechten Richtung teilen.

Parameter Typ Standard Beschreibung
...others ImageHandle[] — Zu fügende Bilder 
JS:   const strip = img1.montageH(img2, img3, img4)

Effekte & Stile

vignette — Vignette

Verdunkelt die Bildränder progressiv in Richtung der Ecken und lenkt die Aufmerksamkeit auf die Bildmitte. Basiert auf einem Radialverlauf — volle Helligkeit in der Mitte, verdunkelt am Rand.

Mehr Infos: Vignettierung – Wikipedia

Parameter Typ Standard Beschreibung
strength Zahl — Effektstärke ∈ [0..1] (0 = kein Effekt, 1 = starke Randabdunklung)
rect Rect? gesamt Normierter Bereich 
JS:   img.vignette(0.4)

glow — Leuchteffekt

Fügt hellen Bereichen einen weichen, leuchtenden Heiligenschein hinzu, indem eine unscharfe, farbig getönte Kopie des Bildes mit Screen-Blend-Modus übereinander geblendet wird.

Parameter Typ Standard Beschreibung
blur Zahl 15 Glühradius (Gauss-Sigma)
color Color weiß Farbe des Glühlichts 
JS:   img.glow(15, "#ffffff")

dropShadow — Schlagschatten

Fügt einen Schlagschatten hinzu, indem eine unscharfe, versetzte, eingefärbte Kopie der Bildsilhouette hinter dem Original platziert wird.

Parameter Typ Standard Beschreibung
dx Zahl 5 Horizontaler Schattenversatz in Pixeln
dy Zahl 5 Vertikaler Schattenversatz
blur Zahl 8 Unschärferadius des Schattens (Gauss-Sigma)
color Color schwarz Schattenfarbe 
JS:   img.dropShadow(5, 5, 8, "#000000")

artisticBold — Tuschzeichnung

Preset-Stil der Canny-Kantendetektion, morphologische Dilatation und Farb-Inversion kombiniert und einen kräftigen Tuschzeichnungs- / Comic-Linien-Effekt erzeugt.

Parameter Typ Standard Beschreibung
size Zahl 1 Dilatationsradius für Linienstärke

MLC OpticScript v0.6.1 · © 2026 Michael Lechner · Elastic License 2.0