Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

Auf der Kommandozeile gibt es Werkzeuge um mit Bild und Video einfach zu arbeiten

▻

Bildverarbeitung mit image magick

image magick kann auf apple mit brew install imagemagick installiert werden.

Das Paket enthält mehrere spearate Befehle:

  • magick zum Verändern einer Bild-Datei
  • magick identify zum anzeigen des Typs und der Dimensionen von Bildern
  • magick montage zum Zusammenstellen von Collagen aus mehreren Bildern.
▻

Bilder identifizieren

Der Befehl magick identify zeigt den typ und die wichtigsten Eckdaten eines Bildes an:

$ magick identify *
teletype.jpg JPEG 1600x1200 1600x1200+0+0 8-bit sRGB 189649B 0.000u 0:00.000
terminal-pwd.png PNG 336x128 336x128+0+0 8-bit sRGB 14051B 0.000u 0:00.000
terminal.png PNG 848x552 848x552+0+0 8-bit sRGB 171623B 0.000u 0:00.000
tinymce.png PNG 767x214 767x214+0+0 8-bit sRGB 26551B 0.000u 0:00.000
tinymce@2x.png PNG 1534x428 1534x428+0+0 8-bit sRGB 44612B 0.000u 0:00.000

Bei gif-Animationen werden die einzelnen Frames angezeigt:

$ magick identify drag-and-drop-upload.gif
drag-and-drop-upload.gif[0] GIF 600x206 600x206+0+0 8-bit sRGB 256c 0.000u 0:00.002
drag-and-drop-upload.gif[1] GIF 600x206 600x206+0+0 8-bit sRGB 256c 0.000u 0:00.002
...
drag-and-drop-upload.gif[22] GIF 600x206 600x206+0+0 8-bit sRGB 256c 0.000u 0:00.001
drag-and-drop-upload.gif[23] GIF 600x206 600x206+0+0 8-bit sRGB 256c 956685B 0.000u 0:00.001
▻

Bild Konvertieren

Manchmal erhält man Bilder in einem unpassenden Format. So erzeugt der Mac alle Bildschirmphotos als pngs. Manche profitieren durch die jpg-Komprimierung:

$ magick Bildschirmfoto.png Bildschirmfoto.jpg
$ magick Bildschirmfoto.png Bildschirmfoto.webp
$ magick identify Bildschirmfoto.*
Bildschirmfoto.jpg JPEG 2880x1800 2880x1800+0+0 8-bit sRGB 656908B 0.000u 0:00.000
Bildschirmfoto.png PNG 2880x1800 2880x1800+0+0 8-bit sRGB 1.73215MiB 0.000u 0:00.000
Bildschirmfoto.webp WEBP 2880x1800 2880x1800+0+0 8-bit sRGB 182964B 0.070u 0:00.064
$ du -h Bildschirmfoto.*
644K	Bildschirmfoto.jpg
1,7M	Bildschirmfoto.png
180K	Bildschirmfoto.webp

Aus 1,6 Megabyte png wurden also 644 Kilobyte jpeg und 180 Kilobyte webp. Ein Faktor 10 Kompression zahlt sich auf jeden Fall aus!

▻

Bildgröße Verändern

Oft erhält man Photos mit sehr hoher Auflösung:

$ magick identify Hochzeit.jpg
Hochzeit.jpg JPEG 5760x3840 5760x3840+0+0 8-bit sRGB 18.2662MiB 0.000u 0:00.005

Aus diesem Bild kann man kleinere Varianten erzeugen

$ magick Hochzeit.jpg -geometry 2400x hochzeit_2400.jpg
$ magick Hochzeit.jpg -geometry 1200x hochzeit_1200.jpg
$ magick Hochzeit.jpg -geometry 800x  hochzeit_800.jpg
$ magick identify hochzeit_*
hochzeit_1200.jpg JPEG 1200x800 1200x800+0+0 8-bit sRGB 1.06958MiB 0.000u 0:00.003
hochzeit_2400.jpg JPEG 2400x1600 2400x1600+0+0 8-bit sRGB 4076950B 0.000u 0:00.000
hochzeit_800.jpg JPEG 800x533 800x533+0+0 8-bit sRGB 555496B 0.000u 0:00.000
▻

Aus Standbildern ein Animiertes GIF machen

Aus mehreren Standbildern - in diesem Beispiel mehreren png-dateien kann imagemagic ein animiertes gif machen:

magick *.png -delay 7 -loop 0 -alpha set -dispose previous  sprite.gif
▻

Collagen

Mehrere Bilder nebeneinander zusammenfügen:

magick left.jpg right.jpg +append side_by_side.jpg

Mehrere Bilder untereinander zusammenfügen:

magick top.jpg bottom.jpg -append above_and_below.jpg
▻

Meta-Information über Rotation entfernen

Handy-Photos können Information über die Orientierung des Bildes enhalten. Falls die Kamera am Kopf steht wenn man das Bild macht, dann wird im Bild gespeichert dass es um 180° gedreht angezeigt werden soll. Das fukntioniert aber nicht immer.

Folgender Befehl rückt das Bild gerade und entfernt die Meta-Information:

magick IMG_20180830_110737.jpg -auto-orient -strip aufrecht.jpg
▻

Mehr über image magick

Das waren sehr einfache Beispiele. Über die Kommandozeilen-Tools gibt es noch viel zu lernen, siehe:

image magick kann auch als library in vielen Programmiersprachen verwendet werden. z.B. PHP, C#, node.js

▻

Videoverarbeitung mit ffmpeg

ffmpeg kann auf apple mit brew install ffmpeg installiert werden.

▻

Video schneiden

Um einen kürzeren Clip aus einem Vidoe herauszuschneiden:

$ ffmpeg -ss 00:40:00.0 -i  Besprechung.mp4 -c copy -t 00:01:00.0 Besprechung.mp4

output

▻

Ein Standbild aus einem Video entnehmen

$ ffmpeg -ss 0:20:00  -i  Besprechung.mp4 -vframes 1 -q:v 2 output.jpg

output

So sieht das Ergebnis aus:

Aus diesem Standbild konnte ich herauslesen welchen Ausschnitt des Bildschirms ausgeschnitten werden soll.

▻

Ein Video auf ein kleineres Rechteck beschneiden

Ein Rechteck das an Koordinaten x/y startet, und breite out_w, höhe out_h hat aus einem Video ausschneiden und neue Datei out abspeichern:

$ ffmpeg -i Besprechung.mp4 -filter:v "crop=out_w:out_h:x:y" Slides.mp4

output