Steuerungstasten

→ nächste Folie (auch Enter oder Spacebar).
← vorherige Folie
 d  schaltet das Zeichnen auf Folien ein/aus
 p  wechselt zwischen Druck- und Präsentationsansicht
CTRL  +  vergrößert die Folien
CTRL  -  verkleinert die Folien
CTRL  0  setzt die Größenänderung zurück

Das Weiterschalten der Folien kann ebenfalls durch das Klicken auf den rechten bzw. linken Folienrand erfolgen.

Die Sinne des Menschen

  • Menschen nehmen Informationen mit ihren Sinnen auf:
    • Hören
    • Sehen
    • Riechen
    • Schmecken
    • Tasten
  • Gibt es noch mehr Sinne?
    • Temperatursinn
    • Schmerzempfindung
    • Gleichgewichtssinn

Bestandteile von Multimedia Dokumenten

  • Heutige Multimedia-Dokumente bestehen in der Regel aus Informationen für die Sinne "Hören" und "Sehen":
  • Text
    • Unformatierter Text
    • Text in diversen Formaten: HTML, PDF, PS, Latex, Word, Powerpoint, ...
  • Bilder
    • 2D-Vektorgrafik: Bestehend aus geometrischen Primitiven, wie Linien, Kreise, Textblöcke, ...
    • Rasterbilder: Bestehend aus Pixeldaten

Bestandteile von Multimedia Dokumenten

  • Audio
    • in geringer Bandbreite (z.B. für Sprache)
    • in mittlerer Bandbreite (CD-Qualität)
    • in hoher Bandbreite (z.B. Audio-DVD-Qualität)
  • Video
    • Typischerweise zeitliche Folge von Rasterbildern
    • Videos werden auf Grund ihres großen Speicherbedarfs fast immer komprimiert gespeichert bzw. übertragen

Text

Zeichenkodierung

  • Um Text auf einem Computer darzustellen, muss jeder Buchstabe binär kodiert werden
  • Je nachdem wie viele Bits pro Zeichen verwendet werden, können unterschiedlich viele verschiedene Zeichen abgelegt werden
  • Beispiel:
    • 7 Bits: 27 = 128 verschiedene Zeichen
    • 8 Bits: 28 = 256 verschiedene Zeichen
    • 16 Bits: 216 = 65536 verschiedene Zeichen

ASCII-Code

  • Der ASCII-Code (American Standard Code for Information Interchange) ist eine 7-Bit-Zeichenkodierung, die 1963 von der American Standards Association (ASA) beschlossen wurde
  • Ein Zeichen wird jedoch immer als 1 Byte (=8 Bits) abgelegt, d.h. das höchstwertige (8.) Bit ist immer Null
  • Insgesamt gibt es 128 Zeichen, davon 95 druckbare und 33 Steuerzeichen

ASCII-Code

  • In folgender Tabelle sind alle 128 ASCII-Zeichen angegeben
  • Wird der Mauszeiger über ein Zeichen gehalten, wird eine kurze Beschreibung angezeigt
Hex Code …0 …1 …2 …3 …4 …5 …6 …7 …8 …9 …A …B …C …D …E …F
0… NUL SOH STX ETX EOT ENQ ACK BEL BS HT LF VT FF CR SO SI
1… DLE DC1 DC2 DC3 DC4 NAK SYN ETB CAN EM SUB ESC FS GS RS US
2… SP ! " # $ % & ' ( ) * + , - . /
3… 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4… @ A B C D E F G H I J K L M N O
5… P Q R S T U V W X Y Z [ \ ] ^ _
6… ` a b c d e f g h i j k l m n o
7… p q r s t u v w x y z { | } ~ DEL
  • Beispiel: Das Zeichen "A" hat den Hexadezimalwert (41)16
    (41)16 = (01000001)2 = (65)10
Quelle: Wikipedia

ASCII-Code

  • Die Steuerzeichen stammen aus einer Zeit, in der der ASCII-Code zur Steuerung von Fernschreibern (elektrisch angesteuerte Schreibmaschinen) verwendet wurde
  • Heutzutage haben viele dieser Steuerzeichen ihre Bedeutung verloren
  • Wichtig ist eigentlich nur noch das Steuerzeichen für eine neue Zeile: "LF" (Line Feed, ASCII (0A)16)
  • Beim Betriebssystem Windows muss dem "Line Feed" Zeichen allerdings noch ein "Carriage Return" vorangestellt werden: "CR LF" (=ASCII (0D)16 (0A)16)

ISO 8859

ISO 8859-1 Westeuropäisch (Latin-1)
ISO 8859-2 Mitteleuropäisch (Latin-2)
ISO 8859-3 Südeuropäisch (Latin-3)
ISO 8859-4 Nordeuropäisch (Latin-4)
ISO 8859-5 Kyrillisch
ISO 8859-6 Arabisch
ISO 8859-7 Griechisch
ISO 8859-8 Hebräisch
ISO 8859-9 Türkisch (Latin-5)
ISO 8859-10 Nordisch (Latin-6)
ISO 8859-11 Thai
ISO 8859-12 verworfen
ISO 8859-13 Baltisch (Latin-7)
ISO 8859-14 Keltisch (Latin-8)
ISO 8859-15 Westeuropäisch (Latin-9)
ISO 8859-16 Südosteuropäisch (Latin-10)
  • Bei der ASCII-Codierung werden nur 7 der 8 Bits eines Bytes genutzt
  • Der restliche Zahlenbereich (128 bis 255) kann also für weitere Zeichen verwendet werden
  • Die International Organization for Standardization definiert in ISO 8859 insgesamt 15 ASCII-Erweiterungen
  • ISO 8859-1 enthält z.B. die für uns in Deutschland wichtigen Buchstaben: "ä", "ö", "ü", "ß"

Unicode

  • Bei der Verwendung von ISO 8859 zum Austausch von Texten kommt es immer wieder zu fehlerhaften Darstellungen von Zeichen. Dies passiert leicht, wenn Sender und Empfänger nicht die gleiche ISO 8859-x Norm zur Dekodierung verwenden
  • Außerdem sind in ISO 8859 längst nicht alle Schriftzeichen aus den unterschiedlichen Kulturkreisen erfasst
  • Die Bestrebung des Unicode ist es, eine einzige universelle Kodierung zu definieren, die alle relevanten Zeichen enthält
  • Der Unicode wurde von der ISO als ISO-10646 standardisiert

Unicode

  • Der Unicode besteht aus 17 Ebenen (darstellbar mit 5 Bits)
  • Jede Ebene hat 16 Bits und kann damit theoretisch 216 = 65536 Zeichen kodieren
  • Insgesamt kann ein Unicode also 5 + 16 = 21 Bits benötigen
  • Die meisten aktuell verwendeten Zeichen sind in Ebene 0, der Basic Multilingual Plane (BMP), zu finden
  • Ein Unicode Zeichen wird häufig als ein "U+" und einer Hexadezimalzahl mit mindestens 4 Stellen angegeben
  • Beispiele:
    U+00E4 für das "ä"
    U+1300C für die ägyptische Hieroglyphe hiero_A10
Bildquelle: Unicodeblock Ägyptische Hieroglyphen

Unicode

  • Die Kodierung aller möglichen Schriftzeichen ist ein andauernder Prozess, d.h. die Anzahl der Zeichen wächst ständig
  • Ein Problem bei der Darstellung ist, dass die meisten Schriftarten nur eine kleine Untermenge der im Unicode definierten Zeichen bereit halten
  • Ist ein Zeichen in einer Schrift nicht vorhanden, wird oftmals einfach ein Zeichen aus einer anderen Schriftart eingefügt
  • Die Webseite https://www.decodeunicode.org/ hat es sich zur Aufgabe gemacht, alle aktuell im Unicode kodierten Zeichen darzustellen

Unicode

  • Beim Entwurf des Unicode wurde auf Kontinuität Wert gelegt
  • Aus den 21 Bits des Unicodes entsprechen die ersten 7 Bits dem ASCII-Code und die ersten 8 Bits der ASCII-Erweiterungen ISO 8859-1 (Latin 1)
unicode

UTF

utf
  • Zur Kodierung von Unicode-Zeichen wird das UTF "Universal Transformation Format" verwendet
  • UTF-32 kodiert jedes Unicode-Zeichen mit 32 Bits, indem es die 21 Unicode Bits mit Nullen auffüllt
  • UTF-16 kodiert alle Bits der Basic Multilingual Plane (BMP) mit 16 Bits, nur für die anderen Ebenen werden 32 Bits benötigt

UTF-8

utf
  • UTF-8 kodiert die ersten 7 Unicode Bits (entspricht ASCII) mit 8 Bits,
    die ersten 11 Unicode Bits mit 16 Bits, usw.
  • Ein UTF-8 kodierter Text, der nur ASCII Zeichen enthält, ist demnach vollständig mit ASCII kompatibel
  • UTF-8 ist heutzutage (besonders im Internet) weit verbreitet (Quasi-Standard der Zeichenkodierung)

Webseiten

  • Webseiten im World Wide Web vereinigen Medien (wie Text, Audio, Bilder und Video) und erlauben dem Nutzer, interaktiv die gewünschte Information abzurufen bzw. selbst Informationen zu verbreiten
  • Webseiten werden mittels Hypertext Markup Language (HTML) beschrieben
  • Durch sogenannte Hyperlinks können Verweise auf andere Webseiten eingefügt werden
  • Durch die Hyperlinks entsteht eine netzartige Struktur (daher engl. "Web")

Hypertext Markup Language (HTML)

  • HTML-Webseiten werden durch HTML-Elemente strukturiert
  • In der Regel wird ein HTML-Element durch ein Tag-Paar beschrieben, das aus einem Start- und einem End-Tag besteht zwischen denen der eigentliche Inhalt steht
  • Beispielsweise für einen Paragraphen mit Text: 
    <p>Dies ist ein Text</p>
  • Es gibt jedoch auch HTML-Elemente, die keinen Inhalt haben. Dann gibt es kein explizites End-Tag
  • Beispielsweise ein erzwungener Zeilenumbruch (engl. "line break"): 
    <p>Dies ist ein Text. <br> Mehr Text in der nächsten Zeile.</p>
  • In den Start-Tags können zusätzliche Attribute angeben werden
  • Beispielsweise das Ziel eines Hyperlinks 
    <p>Besuchen Sie meine <a href="otherSite.html">andere Webseite</a> mit mehr Text.</p>

Eine Webseite mit Text

  • Hier ist ein Beispiel für eine einfache HTML5-Webseite mit Text gezeigt:
<!doctype html>

<html>
<head>
  <meta charset="utf-8">
  <title>A simple HTML5 example</title>
</head>

<body>
  <h1>This is a heading</h1>
  <p>This is some text</p>
  <h2>This is a smaller heading</h2>
  <p>This is more text <br> with a line break</p>
  <p>Please visit my <a href="otherSite.html">other website</a> with more text</p>
</body>
</html>

Quelltext: simple.html

Eine Webseite mit Text

  • Soll der Quelltext als ASCII-Datei speicherbar sein, können Unicode-Zeichen durch ihren Hexadezimalcode angeben werden: &#x00E4;
  • Ist sichergestellt, das die Datei immer mit Editoren bearbeitet wird, die UTF-8 verwenden, kann die Datei auch direkt als UTF-8 gespeichert werden
  • Die Kodierung wird via charset angegeben
<!doctype html>

<html>
<head>
  <meta charset="utf-8">
  <title>International order</title>
</head>

<body>
  <h1>International order</h1>
  <p>Hello German user: Thorm&#x00E4;hlen with &auml;. Please pay 1000 &#x20AC;.</p>
  <p>Hello Chinese user: &#x8B5A; &#x5929; &#x7FF0;. Please pay 1000 &#x00A5;.</p>
</body>
</html>

Quelltext: charset.html

Änderung der visuellen Darstellung mit CSS

  • Cascading Style Sheets (CSS) erlauben, die visuelle Darstellung einer Webseite zu verändern
  • Der große Vorteil ist, dass Inhalt und Darstellung getrennt behandelt werden können
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A simple HTML5 and CSS example</title>
    <style>
      body {  
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #003366;
        color: #FFFFFF;
      } 
      p {
        color: #808080;
      }
      .myClass {
        color: #00FF00;
        font-style: italic;
      }
      
      #myUniqueId {
        color: #00FFFF;
      }
    </style>
  </head>

  <body>
    <h1>This is a heading</h1>
    <p>This is some text</p>
    <p class="myClass">This is text of type "myclass"</p>
    <p>This is more normal text</p>
    <p class="myClass">This is more text of type "myclass"</p>
    <p id="myUniqueId" class="myClass">This text of type "myclass" 
                                       has an ID that makes it unique</p>
  </body>
</html>

Quelltext: simplecss.html

Änderung der visuellen Darstellung mit CSS

  • CSS Styles können auch in einer separaten Datei definiert werden
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A simple HTML5 and CSS example</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    ...
  </body>
</html>

Die HTML-Elemente <div> und <span>

  • Die HTML-Elemente <div> und <span> dienen zur Strukturierung eines HTML-Dokuments und sind außerdem bei der Zuweisung von CSS-Styles wichtig
  • Der Unterschied der beiden ist, dass die <div>-Elemente blockweise während die <span>-Elemente in einer Zeile angeordnet werden 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A simple HTML5 and CSS example</title>
    <style type="text/css">
      body {  
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #000000;
        color: #FFFFFF;
      } 
      .myRedDivs {
        background-color: #FF0000;
      }
      .myGreenDivs {
        background-color: #00FF00;
      }
      .myBlueSpan {
        background-color: #0000FF;
      }
    </style>
  </head>

  <body>
    <div class="myRedDivs">
      <h1>This is a heading</h1>
      <p>This is some text</p> 
    </div>
    <div class="myGreenDivs">
      <h1>This is a heading</h1>
      <p>This is some text</p> 
    </div>
    <div class="myRedDivs">
      <h1>This is a <span class="myBlueSpan">heading</span></h1>
      <p>This is some text</p> 
    </div>
  </body>
</html>

Quelltext: css_div_span.html

Bilder

Vektorgrafik

  • Eine Möglichkeit ein 2D-Bild zu beschreiben, ist in Form einer Vektorgrafik
  • Der Begriff ergibt sich daraus, dass die Koordinaten als Vektoren geschrieben werden können
  • Für einen Punkt $\mathbf{p}$ in einem 2D-Koordinatensystem beispielsweise

    $\mathbf{p}=\begin{pmatrix} x\\y\end{pmatrix} = \begin{pmatrix} 4.5\\2.33\end{pmatrix}$

Vektorgrafik

  • In der Vektorgrafik werden die Objekte durch Kombination von Basisobjekten (wie z.B. Linie, Rechteck, Kreis, Dreieck, Polygon) beschrieben
vectordraw
$x$-Koordinate
$y$-Koordinate
Dreieck
Rechteck

Vektorgrafik

public void paint(Graphics g) {
  Graphics2D g2d = (Graphics2D) g; // cast to Graphics2D
  g2d.draw(new Rectangle2D.Double(20.75, 45.0, 60.0, 30.00) );
  g2d.fill(new Rectangle2D.Double(67.33, 60.0,  8.0, 15.00) ); 
  g2d.fill(new Rectangle2D.Double(35.00, 55.0, 20.3, 11.00) );
  GeneralPath triangle = new GeneralPath(); 
  triangle.moveTo(10.75, 46.0);
  triangle.lineTo(90.75, 46.0);
  triangle.lineTo(50.75, 10.0);
  triangle.closePath();
  g2d.fill(triangle);
 }
vectordrawsmall

Vollständiger Quelltext:
MyGraphics2DHouse.java

Vektorgrafik

  • Eine Repräsentation als Vektorgrafik hat den Vorteil, dass die Objekte beliebig vergrößert oder verkleinert werden können
  • Ein analoger Plotter beispielsweise kann die Koordinaten genau anfahren und so ein sehr genaues Abbild der Formen zeichnen
worldmapfull
Weltkarte
worldmapdetail
Ausschnittsvergrößerung
Quelle: John Harvey, Blank map of the world Equirectangular, Creative Commons License

Interaktive Demonstration: Vektorgrafik

your browser does not support SVG

Größenänderung: 100%:

Quelle: Johnny Automatic, Robot Dog, Public Domain

Erstellen von Vektorgrafiken

Zum Erstellen von 2D-Vektorgrafiken gibt es zahlreiche freie und kommerzielle Programme:

Speichern von Vektorgrafiken

Beliebte Dateiformate zum Speichern von 2D-Vektorgrafiken sind:

Eine Webseite mit 2D-Vektorgrafiken

  • Zum Einfügen von 2D-Vektorgrafiken in Webseiten gibt es drei Möglichkeiten
    • Option 1: <svg>-Element
    • Option 2: <img>-Element
    • Option 3: Zeichnen via JavaScript in ein <canvas>-Element

Eine Webseite mit 2D-Vektorgrafiken

  • Option 1: <svg>-Element
<!doctype html>

<html>
  <head>
    <meta charset="utf-8">
    <title>An example for inline SVG</title>
  </head>

  <body>
    <h1>An example for inline SVG</h1>
    <p>This is some text</p>
    <svg width="100" height="100" style="border:1px solid black;">
      <rect x="20.75" y="45.0" width="60.0" height="30.0" style="fill:none; stroke-width:1; stroke:rgb(0,0,0);" />
      <rect x="67.33" y="60.0" width="8.0" height="15.0" style="fill:rgb(0,0,0); stroke:none;" />
      <rect x="35.0" y="55.0" width="20.3" height="11.0" style="fill:rgb(0,0,0); stroke:none;" />
      <polygon points="10.75,46.0 90.75,46.0 50.75,10.0" style="fill:rgb(0,0,0); stroke:none;" />
    </svg> 
  </body>
</html>

Quelltext: svg.html

Eine Webseite mit 2D-Vektorgrafiken

  • Option 2: <img>-Element
<!doctype html>

<html>
  <head>
    <meta charset="utf-8">
    <title>An example for embedding an SVG object</title>
  </head>

  <body>
    <h1>An example for embedding an SVG object</h1>
    <p>This is some text</p>
    <img src="./house.svg"  style="width:200px; height:200px" alt="house">
  </body>
</html>

Quelltext: svg_import.html

Eine Webseite mit 2D-Vektorgrafiken

  • Option 3: Zeichnen via JavaScript in ein <canvas>-Element
<!doctype html>

<html>
  <head>
    <meta charset="utf-8">
    <title>An example for drawing in an HTML canvas element</title>
    <script>
      function draw() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.lineWidth = "1";
        ctx.strokeStyle = "#000000";
        ctx.beginPath();
        ctx.rect(20.75, 45.0, 60.0, 30.00);
        ctx.stroke();
        ctx.beginPath();
        ctx.rect(67.33, 60.0, 8.0, 15.00);
        ctx.fill();
        ctx.beginPath();
        ctx.rect(35.00, 55.0, 20.3, 11.00);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(10.75, 46.0);
        ctx.lineTo(90.75, 46.0);
        ctx.lineTo(50.75, 10.0);
        ctx.closePath();
        ctx.fill();
       }
    </script> 
  </head>


  <body onload="draw();">
    <h1>An example for drawing in an HTML canvas element</h1>
    <p>This is some text</p>
    <canvas id="myCanvas" width="100" height="100">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
  </body>
</html>

Quelltext: canvas.html

Rastergrafik

  • Die heutigen Bildschirme stellen einzelne Bildelemente dar (Pixel="Picture Elements"), die auf einem festen Raster angeordnet sind
  • Drucker mit linearem Papiervorschub (keine Plotter) tragen Farbe ebenfalls mit diskreten Punktrastern auf
  • Rastergrafiken besitzen einen Farbwert für jedes Pixel ihres Rasters. Sie sind daher vollständig definiert durch:
    • Bildbreite: Anzahl der Pixel in x-Richtung
    • Bildhöhe: Anzahl der Pixel in y-Richtung
    • und einem Datenfeld mit (Breite x Höhe) Farbwerten

Rastergrafik

  • Hier ein Beispiel für eine Rastergrafik mit 9 x 6 Pixeln (Zählung beginnt bei 0)
  • Im Folgenden wird angenommen, dass das Pixelraster durch die Mitte der Pixelfläche verläuft
pixeldraw
$x$-Koordinate
$y$-Koordinate
Pixelfläche
Pixelraster
Außenkante der Rastergrafik

Rastergrafik

  • Auch Bilddateien nutzen Rastergrafik
  • Bilddaten von realen Objekten werden z.B. mit einer Digitalkamera mit lichtempfindlichen Pixelflächen erfasst
    • 1280 × 1024 (1,3 Megapixel)
    • 2560 × 2048 (5,2 Megapixel)
    • 5120 × 4096 (21 Megapixel)
  • Typische Konventionen bei Rastergrafiken:
    • Zählung der Pixel beginnt bei 0
    • $x$-Koordinatenachse nach rechts
    • $y$-Koordinatennachse nach unten

Rastergrafik

  • Sehr häufig wird pro Pixel ein RGB-Farbwert (Rot, Grün, Blau) abgelegt (oder RGBA-Wert, wobei der zusätzliche Alpha-Wert die Opazität angibt)
  • RGB-Farbraum:
  • Die Pixel-Daten werden sequenziell im Speicher abgelegt
  • Dabei verwenden die meisten Formate die Konvention, dass die Daten zeilenweise abgelegt werden

Grundgerüst einer eigenen Rastergrafik-Klasse in Java:

class RasterImage {
protected int imageWidth;
protected int imageHeight;
protected int[] imageData;

public RasterImage(int width, int height) { 
  imageData = new int[width*height]; ...
}
public int getPixel(int x, int y) { 
  return imageData[y*imageWidth+x];
}
public void setPixel(int pixelValue, int x, int y) { 
  imageData[y*imageWidth+x] = pixelValue;
}
...
};

Grundgerüst einer eigenen Rastergrafik-Klasse in C++:

template<typename T> class RasterImage {
protected:
  unsigned imageWidth;
  unsigned imageHeight;
  T* imageData;
public:
  RasterImage(unsigned width, unsigned height) { 
    imageData = new T[width*height]; ...
  }
  const T getPixel(unsigned x, unsigned y) const { 
    return imageData[y*imageWidth+x];
  }
  void setPixel(T pixelValue, unsigned x, unsigned y) { 
    imageData[y*imageWidth+x] = pixelValue;
  }
  ...
};

Java BufferedImage

MyPaintPanel extends JPanel {
private BufferedImage img = null;
public void createGUI() {
  try { img = ImageIO.read(new File("./horse.jpg")); } 
  catch (IOException e) { System.out.println("failed to load image"); }
  ...
}
public void paint(Graphics g) {
  super.paint(g); Graphics2D g2d = (Graphics2D) g;
  int oldRgb = img.getRGB(10, 100); // read a pixel
  int rgb = 0xFFFF0000; // Alpha-Red-Green-Blue
  img.setRGB(10, 100, rgb); // draw red pixel
  g.drawImage(img, 0, 0, null);
}
}

Quelltext des Beispiels: MyBufferedImage.java

Vorteile Rastergrafik

  • Sehr geeignet für komplexe Szenen mit unregelmäßigen Formen oder vielen Farben
  • Speicherbedarf ist unabhängig von der Szenenkomplexität
  • Direkte Darstellung auf heutigen Bildschirmen

Nachteile Rastergrafik

  • Bei der Darstellung sehr einfacher Objekte ist der Speicherbedarf im Vergleich zu einer Vektorgrafik höher
  • Bei starker Vergrößerung werden einzelne Pixel erkennbar
  • Dieser Effekt wird auch Treppeneffekt oder Aliasing genannt
worldmapdetailpixel
Ausschnittsvergrößerung Vektorgrafik
worldmapdetail
Ausschnittsvergrößerung Rastergrafik
Quelle: John Harvey, Blank map of the world Equirectangular, Creative Commons License

Erstellen und Bearbeiten von Rastergrafiken

Es gibt zahlreiche freie und kommerzielle Bildbearbeitungsprogramme:

Speichern von Rastergrafiken

Beliebte Dateiformate für Rastergrafiken sind:

  • PNG (Portable Network Graphics), verlustfreie Kompression
  • JPEG, kleinere Dateien, da verlustbehaftete Kompression
  • TIFF (Tagged Image File Format), typischerweise verlustfreie Kompression, hohe Farbtiefe (bis 32 bit)
  • TGA (Targa Image File), unkomprimiert oder verlustfreie Kompression
  • GIF (Graphics Interchange Format), verlustfreie Kompression, erlaubt Animationssequenzen

Eine Webseite mit Rasterbildern

  • Hier ist ein Beispiel für eine einfache HTML5-Webseite mit Rasterbildern gezeigt:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>How to add an image</title>
</head>
<body>
  <h1>How to add an image</h1>
  <p>This is an image 
  <img src="./horse.jpg" alt="horse"> 
  that is inline with the text</p>
  <hr>
  <p>This is an image 
  <img src="./horse.jpg" alt="horse" style="vertical-align: middle;"> 
  that is inline with the text and vertically centered</p>
  <hr>
  <p>This is an image 
  <img src="./horse.jpg" alt="horse" style="display: block;"> 
  that is displayed as a block (no text at any side)</p>
</body>
</html>

Quelltext: img.html

Manipulation von Pixeln in einem HTML <canvas> Element

  • Ein Beispiel für die Manipulation von Pixeln in einem HTML <canvas> element
<!doctype html>

<html>

<head>
  <meta charset="utf-8">
  <title>An example for manipulating pixels in an HTML canvas element</title>
  <script>
    function draw() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var width = c.width;
      var height = c.height;
      var image = ctx.getImageData(0, 0, width, height);
      var imageData = image.data;
      for (var x = 0; x < width; x++) {
        for (var y = 0; y < height; y++) {
          if (x < 50 && y < 50) {
            imageData[x * 4 + y * width * 4 + 0] = 255; // red;
            imageData[x * 4 + y * width * 4 + 1] = 255; // green;
            imageData[x * 4 + y * width * 4 + 2] = 0;   // blue;
            imageData[x * 4 + y * width * 4 + 3] = 255; // alpha;
          } else {
            imageData[x * 4 + y * width * 4 + 0] = 0;   // red;
            imageData[x * 4 + y * width * 4 + 1] = 0;   // green;
            imageData[x * 4 + y * width * 4 + 2] = 0;   // blue;
            imageData[x * 4 + y * width * 4 + 3] = 255; // alpha;
          }
        }
      }
      ctx.putImageData(image, 0, 0);
    }
  </script>
</head>


<body onload="draw();">
  <h1>An example for manipulating pixels in an HTML canvas element</h1>
  <p>This is some text</p>
  <canvas id="myCanvas" width="100" height="100">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
</body>

</html>

Quelltext: canvas_pixels.html

Fortsetzung folgt ...

  • Über Texte und Bilder als Bestandteile von Multimedia Dokumenten wurde nun schon gesprochen
  • Es geht weiter mit einer Einführung in Audio und Video in Teil 1, Kapitel 2 der Vorlesung

Gibt es Fragen?

questions

Anregungen oder Verbesserungsvorschläge können auch gerne per E-mail an mich gesendet werden: Kontakt

Weitere Vorlesungsfolien

Folien auf Englisch (Slides in English)

Impressum, Datenschutz,