Vorschaubilder (Thumbnails) erstellen

Das folgende Skript ist eine komplett Lösung für das Hochladen von Bildern und das Erstellen von Vorschaubildern.

Der Einsatz von Vorschaubildern kann unterschiedliche Gründe haben. Kleine Bilder haben wegen der geringeren Dateigröße eine kürzere Ladezeit als große, was besonders im Internet zum Tragen kommt. Die Ladezeit einer Webseite ist oft direkt von den darin enthaltenen Bildern abhängig, denn Bilder stellen fast immer den größten Teil der Datenmenge einer Seite dar. Wenn also eine Seite auf große Bilder verzichtet, um die Ladezeit zu verbessern, kann durch den Einsatz von Vorschaubildern sichergestellt werden, dass der Besucher trotzdem kein Detail im Erscheinungsbild der Webpräsenz verpasst.

✔ Mein Beispielskript hilft Ihnen, Bilder hochzuladen, zu verkleinern und mit PHP auf dem Server zu speichern. Die Größe und Qualität des Vorschaubildes kann individuell angepasst werden.

Quelltext: thumbnails_erstellen.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑

<?php

/*

 * Vorschaubilder (Thumbnails) erstellen

 */



// Verzeichnis in das die Bilder hoch geladen werden.

$directory = "bilder/"; // bilder/



// Verzeichnis in das die Thumbnails gespeichert werden

$directoryThumb = "bilder_klein/"; // bilder_klein/



// Größe der Thumbnails (abhängig vom Format)

$thumbWidth = 150; // Breite in Pixel (150)

$thumbHeight = 100; // Höhe in Pixel (100)



// Qualität der Thumbnails: 0 - 100 (100 = beste Qualität)

$thumbQuality = 50;



// Angabe der Mimetypen (nur Bilddateien)

$mimeType = [

  "jpg" => "image/jpeg",

  "jpeg" => "image/jpeg",

  "png" => "image/png",

  "gif" => "image/gif",

  "webp" => "image/webp"

];



// Maximale Länge des Dateinamens

$maxFilename = 65; // 65



// Ausgabe

$output = '';



if ($_SERVER["REQUEST_METHOD"] == "POST") {



  // Temporäre Bild-Datei wurde hochgeladen

  if (is_uploaded_file($_FILES["file"]["tmp_name"])) {



    // Info über die Bild-Datei holen

    list($tmpWidth, $tmpHeight, $tmpType) = getImageSize($_FILES["file"]["tmp_name"]);

    $path = pathinfo($_FILES["file"]["name"]);

    $extension = strtolower($path["extension"]);

    $filename = $path["filename"];

    // $filename = "image_"; // Bsp. für einheitliche Dateinamen



    // Nur Bilddateien durchlassen

    if (

      $tmpWidth > 0 &&

      $tmpHeight > 0 &&

      in_array($_FILES["file"]["type"], $mimeType) &&

      in_array($extension, array_keys($mimeType))

    ) {



      // Dateiname filtern

      $filename = iconv("ISO-8859-1", "UTF-8", $filename); // UTF-8 decodiert

      $filename = trim($filename); // Whitespace

      $filename = mb_strtolower($filename); // Kleinbuchstaben



      // Hier entsprechende Zeichen und Ersatzzeichen (vom ASCII-Zeichensatz) einfügen

      $filename = str_replace(["ä", "ö", "ü", "ß", " ",], ["ae", "oe", "ue", "ss", "_",], $filename);



      // Angegebene Zeichen durchlassen, alle sonstigen filtern

      $filename = preg_replace("/[^a-z0-9_-]/", "", $filename);



      // Länge des Dateinamens eventuell kürzen

      $newname = substr($filename, 0, $maxFilename) . "." . $extension;



      // Wenn die Bild-Datei vorhanden ist, hänge eine Zahl an den Dateinamen

      // Beispiel: bild.jpg, bild_002.jpg, bild_003.jpg, bild_004.jpg ...

      if (file_exists($directory . $newname)) {

        $nr = 2; // Startzahl

        do {

          $newname = substr($filename, 0, $maxFilename)  . '_' .  str_pad($nr, 3, "0", STR_PAD_LEFT) . "." . $extension;

          $nr++;

        } while (file_exists($directory . $newname));

      }



      // Thumbnail erzeugen

      thumbnail($_FILES["file"]["tmp_name"], $extension, $thumbWidth, $thumbHeight, $thumbQuality, $directoryThumb, $newname);



      // Bild-Datei auf den Server hochladen

      if (move_uploaded_file($_FILES["file"]["tmp_name"], $directory . $newname)) {

        $output = '<p>Die Bild-Datei: &bdquo;' . $newname . '&rdquo; wurde hochgeladen.</p>';

      }

    } else {

      $output = '<p>Bitte nur Bilddateien hochladen!</p>';

    }

  }

}



// Thumbnail erzeugen

function thumbnail($targetFilePath, $extension, $thumbWidth, $thumbHeight, $thumbQuality, $directoryThumb, $newname) {



  // Erzeugt ein neues Thumbnail aus einer Bild-Datei (je nach Dateityp)

  switch ($extension) {

    case 'jpg':

      $create = imageCreatefromJPEG($targetFilePath);

      break;

    case 'png':

      $create = imageCreatefromPNG($targetFilePath);

      break;

    case 'gif':

      $create = imageCreatefromGIF($targetFilePath);

      break;

    case 'webp':

      $create = imageCreatefromWEBP($targetFilePath);

      break;

  }



  // Breite und Höhe des Bildes ermitteln

  $imageW = getImageSize($targetFilePath)[0];

  $imageH = getImageSize($targetFilePath)[1];



  // Thumbnail Abmessungen reduzieren

  if ($imageW > $imageH) {

    $thumbW = $thumbWidth;

    $thumbH = round($imageH / $imageW) * $thumbWidth;

  }



  if ($imageW < $imageH) {

    $thumbH = $thumbHeight;

    $thumbW = round($imageW / $imageH) * $thumbHeight;

  }



  if ($imageW == $imageH) {

    $thumbW = $thumbWidth;

    $thumbH = $thumbHeight;

  }



  // Thumbnail mit neuen Abmessungen kopieren

  $thumbnail = imageCreateTruecolor($thumbW, $thumbH);

  imageCopyResampled($thumbnail, $create, 0, 0, 0, 0, $thumbW, $thumbH, $imageW, $imageH);



  // Thumbnail speichern und den Grafikspeicher löschen

  imageJPEG($thumbnail, $directoryThumb . $newname, $thumbQuality);

  imageDestroy($thumbnail);

}

?>

<!DOCTYPE html>

<html lang="de">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Vorschaubilder (Thumbnails) erstellen</title>



  <style>

    body {

      font-family: Arial, Tahoma, Sans-Serif;

      margin: 25px;

    }



    p {

      width: 430px;

      padding: 10px;

      background-color: Whitesmoke;

      box-shadow: 0px 0px 4px 1px Gainsboro;

    }

  </style>



</head>



<body>



  <form method="post" enctype="multipart/form-data">



    <p>

      <label>Bild: <input type="file" name="file" accept="image/*" required="required"></label>

    </p>



    <p>

      <button type="submit">Absenden</button>

    </p>



  </form>



  <?= $output; ?>



</body>



</html>

Tipps

Hinzufügen von Wasserzeichen beim hochladen eines Bildes

Bilder mit Wasserzeichen markieren

Bilder in den Browser laden per File API

Bilder in einer Datenbank-Tabelle speichern und ausgeben