Canvas Image Library (qpCIL)

Mit Canvas Image Library wird eine JavaScript-Bibliothek für das HTML5 ELement <canvas> vorgestellt. Sie stellt zahlreiche Features wie Überblendverfahren oder Filter zur Verfügung, die aus diversen Bildbearbeitungsprogrammen bekannt sind. Der Autor ist bemührt, den Funktionsumfang ständig zu erweitern.

Demonstration

In den folgenden Boxen finden sich die Effekte und Filter die auf das rechte Bild darunter angewendet werden können. Weiterhin besteht die Möglichkeit, über die Undo-Liste Änderungen rückgängig zu machen.

• Effekte

  Wählen Sie den Effekt, der auf das rechte Bild angewendet werden soll.

  - Effekte - Multiplizieren Negativ Multiplizieren Ineinanderkopieren Weiches Licht Hartes Licht Farbig abwedeln Farbig nachbelichten Linear nachbelichten Abdunkeln Aufhellen Differenz Ausschluss Farbton Sättigung Farbe Luminanz

  Der Effekt soll erfolgen

  ohne Überblend-Bild
  

  mit Überblend-Bild

• Filter

  Wählen Sie den gewünschten Farbfilter.

  - Effekte - Grau Grau (Rotkanal) Grau (Grünkanal) Grau (Blaukanal) Sepia Sepia (Microsoft) Sepia (Blau) Posterize Intensität Blur

  Tiefe Sepia (0..100)
  

  Tiefe Sepia (Blau) (0..100)
  

  Sättigung (-100..100)

• Undo-Liste

Effekte (Überblendverfahren)

Unter Effekte oder Überblendverfahren werden Methoden verstanden, die zwei Bilder Pixel für Pixel miteinander verknüpfen. Dabei stehen folgende Verknüpfungsmöglichkeiten bereit:

• Multiplizieren (multiply)
• Negativ Multiplizieren (screen)
• Ineinanderkopieren (overlay)
• Weiches Licht (soft light)
• Hartes Licht (hard light)
• Farbig abwedeln (color dodge)
• Farbig nachbelichten (color burn)
• Linear nachbelichten (linear burn)
• Abdunkeln (darken)
• Aufhellen (lighten)
• Differenz (difference)
• Ausschluss (exclusion)
• Farbton (hue)
• Sättigung (saturation)
• Farbe (color)
• Luminanz (luminosity)

Filter

Filter verändern die Bildinformationen. So können zum Beispiel Farben gefiltert, Unschärfe generiert oder Intensitäten erzeugt werden. Mit der Canvas Image Library können nachstehende Manipulationen durchgeführt werden:

• Grau (gray filter)
• Grau (Rotkanal) (gray filter, red channel)
• Grau (Grünkanal) (gray filter, green channel)
• Grau (Blaukanal) (gray filter, blue channel)
• Sepia (sepia)
• Sepia (Microsoft) (sepia, Microsoft)
• Sepia (Blau) (sepia, blue)
• Posterize (posterize)
• Intensität (saturation)
• Blur (Unschärfe) (blur)

Browserunterstützung

Die Bibliothek wurde in folgenden Browsern erfolgreich getestet:

• Firefox 3.5+
• Opera 10+
• Google Chrome 9+
• Safari (Win) 3+
• IE 9+