exif reader in slider

Ein Slider der Bilder anzeigt, mit den vorhandenen EXIF Daten.

Der hier verwendete Code

<?php class PictureExifReader { /** * @var string */ private $picturesDir; /** * @var array */ private $acceptedTypes = ['jpg', 'jpeg', 'tiff']; /** * @var array */ private $pictureData = ['FileName', 'Copyright', 'ApertureFNumber', 'ImageDescription', 'Model', 'Artist', 'ExposureTime', 'ISOSpeedRatings', 'DateTimeOriginal', 'FocalLength']; /** * @var array */ private $fileData = ['FileName', 'FileSize', 'MimeType', 'Height', 'Width']; /** * @var array */ private $flattenExif; /** * @var array */ private $chosenData; /** * @param string $pictureDirectory */ public function setPicturesDirectory($picturesDir): void { $this->picturesDir = $picturesDir; } /** * Metoda pobiera wszystkie pliki z katalogu i usuwa pliki o rozrzerzeniach nieobługiwanych przez "exif_read_data" * @return array */ private function getOnlyAcceptedFiles(): array { $fileList = new \DirectoryIterator($this->picturesDir); foreach ($fileList as $file) { $acceptedFiles[] = $file->getBasename(); } return preg_grep('/\.' . implode($this->acceptedTypes, '|') . '$/', $acceptedFiles); } /** * Metoda zwraca spłaszczoną tablicę ze wszytkimi danymi exif * @return array */ private function getFlattenExif(): array { $fileExif = []; foreach ($this->getOnlyAcceptedFiles() as $file) { $fileExif[] = exif_read_data($this->picturesDir . '/' . $file); } foreach ($fileExif as $key => $items) { foreach (new \RecursiveIteratorIterator(new \RecursiveArrayIterator($items)) as $k => $v) { $flatArray[$k] = $v; } $this->flattenExif[$key] = $flatArray; } return $this->flattenExif; } /** * Metoda usuwa wszystkie elementy, których klucze nie pasują do tablicy $allowed * @param array $allowed * @return array */ private function getChosenElements(array $allowed): array { foreach ($this->getFlattenExif() as $key => $value) { $this->chosenData[] = (array_intersect_key($value, array_flip($allowed))); } return $this->chosenData; } /** * Metoda zwraca elementy, które są zawarte w tablicy $pictureData * @return array */ public function getPicturesData(): array { return $this->getChosenElements($this->pictureData); } /** * Metoda zwraca elementy, które są zawarte w tablicy $fileData * @return array */ public function getFilesData(): array { return $this->getChosenElements($this->fileData); } /** * Metoda zwraca elementy, które są elementami obu tablic $fileData i $pictureData * @return array */ public function getPicturesAndFilesData(): array { $fullData = (array_merge($this->pictureData, $this->fileData)); return $this->getChosenElements($fullData); } } //include('PictureExifReader.php'); $galleryPath = 'image/exif_slider/'; $pics = new PictureExifReader(); $pics->setPicturesDirectory($galleryPath); $images = $pics->getPicturesAndFilesData(); function showElement($icon, $title, $element){ echo '<i class="' . $icon . '"></i> <strong>' . $title . '</strong>: ' . $element; } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Exif reader demo</title> <link rel="stylesheet" href="/css_webseite/bootstrap.min.css"> <style> body { background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.5) 100%) center top, url('/image/exif_slider/page.png'); color: #e1e1e1; } hr { border-top: 1px solid rgba(110, 110, 110, .5); } .carousel-inner { border-radius: 20px; box-shadow: 0 0 5px 15px #5f5f5f; } .carousel-caption { left: 5% !important; right: 5% !important; } .d-none { display: block !important; } </style> <script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" data-auto-replace-svg="nest"></script> </head> <body> <div class="container"> <h1 class="mt-3"><i class="far fa-images"></i> Exif reader class demo</h1> <hr/> <div id="carouselExampleCaptions" class="carousel slide mb-5 mt-5" data-ride="carousel"> <ol class="carousel-indicators"> <?php foreach ($images as $key => $image) { ?> <li data-target="#carouselExampleCaptions" data-slide-to="<?php echo $key; ?>" class="<?php if ($key == 0) { echo 'active'; } ?>"></li> <?php } ?> </ol> <div class="carousel-inner"> <?php foreach ($images as $key => $image) { ?> <div class="carousel-item <?php if ($key == 0) { echo 'active'; } ?>"> <img src="<?php echo $galleryPath . $image['FileName']; ?> " class="d-block w-100 " alt="<?php echo $image['ImageDescription']; ?>"> <div class="carousel-caption d-none d-md-block"> <h5><?php echo $image['ImageDescription']; ?></h5> <p> <span class="mr-1"><?php showElement('far fa-sun', 'Aperture', $image['ApertureFNumber']); ?></span> | <span class="mr-1"><?php showElement('far fa-clock', 'Exposure', $image['ExposureTime']); ?>s</span> | <span class="mr-1"><?php showElement('fas fa-adjust', 'ISO', $image['ISOSpeedRatings']); ?></span> | <span class="mr-1"><?php showElement('fas fa-arrows-alt-h', 'Focal Length', (int)$image['FocalLength']); ?>mm</span> | <span class="mr-1"><?php showElement('fas fa-camera-retro', 'Camera', $image['Model']); ?></span> <br/> <span class="mr-1"><?php showElement('fas fa-user', 'Author', $image['Artist']); ?></span> | <span class="mr-1"><?php showElement('fas fa-copyright', '', $image['Copyright']); ?></span> | <span class="mr-1"><?php showElement('fas fa-calendar-alt', 'Created', $image['DateTimeOriginal']); ?></span> <br/> <span class="mr-1"><?php showElement('far fa-file-image', 'File name', $image['FileName']); ?></span>| <span class="mr-1"><?php showElement('far fa-hdd', 'File size', number_format($image['FileSize'] / 1000000, 2)); ?>MB</span>| <span class="mr-1"><?php showElement('fas fa-arrows-alt-h', 'Picture width', $image['Width']); ?>px</span>| <span class="mr-1"><?php showElement('fas fa-arrows-alt-v', 'Picture height', $image['Height']); ?>px</span> </p> </div> </div> <?php } ?> </div> <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <p> <button class="btn btn-info" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i class="fas fa-eye"></i> Show array dump </button> </p> <div class="collapse mb-5" id="collapseExample"> <div class="card card-body"> <pre> <?php var_dump($images); ?> </pre> </div> </div> </div>   <script src="/js_webseite/jquery.js"></script> <script src="/js_webseite/popper.min.js"></script> <script src="/js_webseite/bootstrap441.js"></script>  </body> </html>