Ein Slider der Bilder anzeigt, mit den vorhandenen EXIF Daten.
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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
--><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>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
-->
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/popper.min.js"></script>
<script src="/js_webseite/bootstrap441.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
-->
</body>
</html>