Vorschaubilder (Thumbnails) erstellen

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

[Bildschirmfoto / Grafik]
 Vorschaubilder (Thumbnails) erstellen.

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.

[Bildschirmfoto / Grafik]
 Vorschaubilder (Thumbnails) erstellen.

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.phpKopierenAusblendenZeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<?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 Datei wurde hochgeladen
  
if (is_uploaded_file($_FILES["file"]["tmp_name"])) {

    
// Info über die 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 > &&
        
$tmpHeight > &&
        
in_array($_FILES["file"]["type"], $mimeType) &&
        
in_array($extensionarray_keys($mimeType)) ) {

      
// Dateiname filtern
      
$filename utf8_decode($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($filename0$maxFilename) . "." $extension;

      
// Wenn die Datei vorhanden ist, hänge eine Zahl an den Dateinamen
      // Beispiel: bild002.jpg, bild003.jpg, bild004.jpg
      
if (file_exists($directory $newname)) {
        
$nr 2// Startzahl
        
do {
          
$newname substr($filename0$maxFilename) . str_pad($nr3"0"STR_PAD_LEFT) . "." $extension;
          
$nr++;
        } while (
file_exists($directory $newname));
      }

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

      
// Datei auf den Server hochladen
      
if (move_uploaded_file($_FILES["file"]["tmp_name"], $directory $newname)) {
        
$output '<p>Die 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 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 $imageH $imageW $thumbWidth;
  }

  if (
$imageW < $imageH) {
    
$thumbH $thumbHeight;
    
$thumbW $imageW $imageH $thumbHeight;
  }

  if (
$imageW == $imageH) {
    
$thumbW $thumbWidth;
    
$thumbH $thumbHeight;
  }

  
// Thumbnail mit neuen Abmessungen kopieren
  
$thumbnail imageCreateTruecolor($thumbW$thumbH);
  
imageCopyResampled($thumbnail$create0000$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">
  <title></title>
</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