Tips en Trucs 2022

Base64 afbeeldingen

Onlangs moest ik voor oefeningen op een leerplatform een heleboel afbeeldingen omzetten naar URL's. Of anders uitgedrukt afbeeldingen omzetten om deze in een HTML pagina op te nemen. En HTML pagina's bestaan uitsluitend uit tekst. Met Base64 kan je om het even welke gegevens (dus ook afbeeldingen) omzetten naar ASCII tekens (tekst), zonder verlies aan kwaliteit. Om dit dit vlot te laten verlopen, dacht ik meteen aan een script.

Het script bevat een help functie om andere gebruikers op de hoogte te brengen hoe ze de opdracht (het script) kunnen gebruiken. De help wordt weergegeven als de gebruiker er om vraagt, maar ook als er ongeldige opties worden gebruikt.

Eerst wordt getest of er wel opties opgegeven werden, zo heeft het script ten minste de volledige bestandsnaam (met pad) van de om te zetten afbeelding nodig.

Daarna worden de opties opgehaald en gecontroleerd of ze geldig zijn.

Daarna worden de opties geïnterpreteerd en verwerkt. De verwerking zorgt voor een aantal variabelen die verder bij de omzetting gebruikt worden.

Om de omgezette afbeelding snel en efficiënt te kunnen verwerken in de HTML pagina wordt deze naar het klembord gekopieerd. Dit kan als volledige img-tag (optie -t, --tag) of als URL.

Het script met commentaar

#!/bin/bash
# Zet een afbeelding om in een tekst
# Bruikbaar in een HTML img tag als adres (URL)

# Globale constante
E_OPTERR=65
# Globale variabele
tag=false

help() # Help weergeven op het scherm
{
   echo "Zet een afbeelding om in tekst (Base64)."
   echo "Syntax: img2url [opties] <pad/bestandsnaam_afbeelding>"
   echo "opties:"
   echo "-t|--tag     HTML tag toevoegen."
   echo "-h|--help    help weergeven."
   echo
}

if [ "$#" -eq 0 ]; then   # Script heeft minstens één argument nodig (pad/bestandsnaam)
  help                    # Helptekst weergeven
  exit $E_OPTERR          # Fout melden en script afbreken
fi
# Ophalen opties
args=$(getopt --longoptions "tag,help" --options "th" -- "$@")
VALID_ARGUMENTS=$?
if [ "$VALID_ARGUMENTS" != "0" ]; then # er zijn ongeldige opties gevonden
  help
  exit $E_OPTERR
fi

# Interpreteer de opties
eval set -- "$args"

# Doorloop en verwerk de geldige opties
while [ $# -ge 1 ]; do
  case "$1" in
    --) # Geen opties meer over.
      shift
      break
      ;;
    -t|--tag)
      tag=true
      ;;
    -h|--help)
      help
      exit 0
      ;;
  esac
  shift
done

fullfile=$@ # De resterende optie is de volledige bestandnaam van de afbeelding
filename=$(basename -- "$fullfile")
extension="${filename##*.}"
echo "fullfile: $fullfile" # Gevonden opties weergeven
echo "filename: $filename"
echo "extension: $extension"
echo "tag: $tag"

# Afbeelding omzetten naar Base64 URL
if [ "$tag" = true ]; then # met img tag
  textimage="<img src=\"data:image/$extension;base64,"
else # zonder img tag
  textimage="data:image/$extension;base64,"
fi
# Afbeelding omzetten naar Base64 tekst
textimage="${textimage}$(base64 -w 0 "$fullfile")"
if [ "$tag" = true ]; then # img tag afsluiten
  textimage="${textimage}\" alt=\"\">"
fi
# Naar Base64 tekst omgezette afbeelding naar het klembord sturen
echo -n "$textimage" | xclip -sel clip
# Geef xclip de tijd om alles naar het klembord te kopieren
sleep 10

Het script uitvoeren

In een terminal voer je het script uit met bijvoorbeeld de volgende opdracht:

dany@main:~> sh img2url.sh Documenten/Homepage/linux/common/created-bluefish.png
fullfile: Documenten/Homepage/linux/common/created-bluefish.png
filename: created-bluefish.png
extension: png
tag: false

Afwerken voor dagelijks gebruik

Om elke gebruiker toegang te geven tot ons script, kan je het opnemen in het snelmenu van afbeeldingen in de bestandsbeheerder Dolphin. Eerst maken we een map aan om al onze snelmenu opties in op te slaan.

dany@main:~> mkdir -p ~/.local/share/kio/servicemenus

Daarna maak je met je favoriete teksteditor:

dany@main:~> kate ~/.local/share/kio/servicemenus/img2url.desktop

Het bestand aan met de richtlijnen voor het snelmenu met de volgende inhoud:

[Desktop Entry]
ServiceTypes=KonqPopupMenu/Plugin
# Enkel voor afbeeldingen
MimeType=image/*;
# Snelmenu pictogram (naam gevonden in /usr/share/icons/breeze/mimetypes/32/)
Icon=image-jpeg
# Welke actie moet er uitgevoerd worden
Actions=img2url;
Type=Service
X-KDE-ServiceTypes=KonqPopupMenu/Plugin
# Beschrijving van de acties
[Desktop Action img2url]
# Weer te geven naam van de snelmenu optie
Name=Omzetten naar URL
# Uit te voeren opdracht
Exec=sh $HOME/img2url.sh %u;
# Snelmenu pictogram
Icon=image-jpeg

Na het opslaan van dit bestand, moeten we het nog uitvoerbaar maken:

dany@main:~> chmod +x ~/.local/share/kio/servicemenus/img2url.desktop

Snelmenu
Klembord