Vorschaubilder (Thumbnails) erstellen
Das folgende Skript ist eine komplett Lösung für das Hochladen von Bildern und das Erstellen von Vorschaubildern.
![[Bildschirmfoto] Vorschaubilder (Thumbnails) erstellen.](img/vorschaubild_erstellen.png "[Bildschirmfoto] 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] Vorschaubilder (Thumbnails) erstellen.](img/vorschaubild_erstellen2.png "[Bildschirmfoto] 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.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<?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: „' . $newname . '” 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