exif Daten von Bildern auslesen
Hiermit können sie alle EXIF Daten auslesen, die angegeben sind. Auch die Geodaten des Bildes
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
<link rel="stylesheet" href="https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css">
-->
<style>
::-webkit-scrollbar {
width: 10px;
transition: .5s;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #4d4d4d;
transition: .5s;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: black;
}
*,::before,::after{
box-sizing: border-box;
}
body {
background: whitesmoke;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
h1 {
font-size: 21px;
text-align: center;
margin: 20px 0 20px;
}
h2 {
font-size: 19px;
text-align: center;
margin: 20px 0 20px;
color: grey;
}
h1 small {
display: block;
font-size: 15px;
padding-top: 8px;
color: gray;
}
a{
appearance: unset;
border: unset;
text-decoration: unset;
}
#imageUpload {
display: none;
}
label {
display: inline-block;
cursor: pointer;
transition: all 0.2s ease-in-out;
color: black;
}
label:hover::after {
opacity: 1;
}
label::after {
content: "";
display: block;
padding-top: 3px;
border-bottom: 3px solid black;
transition: opacity .5s ease;
opacity: 0;
}
.avatar-preview {
width: 50px;
height: 50px;
position: relative;
border-radius: 25%;
border: 6px solid #ffffff;
box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
display: inline-block;
}
.avatar-preview > div {
width: 100%;
height: 100%;
border-radius: 25%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.fadein {
opacity: 1 !important;
transition: .5s;
}
.main_con{
display: flex;
align-items: center;
width: 100%;
height: 100%;
position: fixed;
}
.first_con{
width: 100%;
max-width: 700px;
background-color: white;
border-radius: 25px;
border: 3px solid black;
margin: 0 auto;
padding: 40px;
}
.drag_box{
width: 90%;
height: 250px;
margin-left: 5%;
background-color: whitesmoke;
border-radius: 25px;
margin-top: 35px;
border: 3px dashed black;
text-align: center;
}
.upload_icon{
font-size: 7rem;
padding-top: 35px;
}
.uploaded_box{
margin-top: 50px;
}
.card_con{
max-height: 250px;
overflow-y: auto;
}
.uploaded_card{
width: 90%;
margin-left: 5%;
margin-top: 35px;
margin-bottom: 35px;
border-radius: 25px;
background-color: whitesmoke;
text-align: left;
padding: 25px;
display: flex;
position: relative;
border: 3px solid black;
}
.img_values{
display: inline-block;
vertical-align: super;
margin-left: 15px;
width: calc(100% - 150px);
margin-right: 50px;
}
.title {
font-size: 19px;
margin-top: 5px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.cancel_card{
display: flex;
background: white;
padding: 10px;
border-radius: 10px;
position: absolute;
right: 25px;
top: 32px;
border: 3px solid black;
cursor: pointer;
transition: .5s;
}
.cancel_card:hover{
background-color: black;
color: white;
}
.button {
background-color: #2b272f;
padding: 20px 30px;
font-size: 19px;
text-align: center;
cursor: pointer;
border: none;
text-decoration: none;
border-radius: 5px;
color: white;
border: 3px solid transparent;
transition: .5s;
border-radius: 15px;
margin: 35px;
margin-top: 25px;
margin-bottom: unset;
}
.button:hover {
border: 3px solid #000000;
background: black;
}
.analyse_active{
border: 3px solid #000000;
background: black;
}
.dimmer{
position: fixed;
background-color: #212025c9;
height: 100%;
width: 100%;
z-index: 100;
display: none;
align-items: center;
}
.popup{
background: white;
width: 50%;
margin: 0 auto;
border-radius: 20px;
border: 3px solid black;
padding: 25px;
max-width: 800px;
}
.popup_letters_con{
height: 200px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
margin-bottom: 80px;
}
.popup .subtitle {
margin: unset;
padding: 50px;
padding-bottom: unset;
}
.popup .text {
padding: 50px;
margin: unset;
padding-top: 5px;
}
.spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite;
width: 30px;
height: 30px;
}
.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
@-webkit-keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
@-webkit-keyframes colors {
0% {
stroke: white;
}
25% {
stroke: white;
}
50% {
stroke: white;
}
75% {
stroke: white;
}
100% {
stroke: white;
}
}
@keyframes colors {
0% {
stroke: white;
}
25% {
stroke: white;
}
50% {
stroke: white;
}
75% {
stroke: white;
}
100% {
stroke: white;
}
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
.second_con{
width: 80%;
background-color: white;
border-radius: 25px;
border: 3px solid black;
margin: 0 auto;
padding: 40px;
height: 80%;
display: none;
position: relative;
}
.second_img_con{
width: calc(100% - 575px);
height: 100%;
border-radius: 25px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.second_data_con{
background: whitesmoke;
width: 550px;
border-radius: 25px;
margin-left: 25px;
padding: 50px;
overflow: auto;
}
.second_mini_cons{
display: flex;
height: 100%;
width: 100%;
}
#second_data_title {
font-size: 25px;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#second_data_sub_title {
font-size: 19px;
margin-top: 5px;
}
pre {
font-family: inherit;
margin-left: 20px;
}
.info_cons {
background: white;
margin-top: 20px;
border: 2px solid black;
border-radius: 15px;
}
.info_con_title {
font-size: 21px;
padding: 20px 20px 20px;
font-weight: bold;
border-bottom: 2px solid;
background: white;
border-radius: 11px;
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown_icon{
padding-left: 5px;
padding-right: 5px;
border: 2px solid black;
border-radius: 5px;
padding-top: 3px;
transition: .5s;
cursor: pointer;
}
.dropdown_icon:hover{
background-color: black;
color: white;
}
.display_none{
display: none;
}
.direction_buttons{
top: 12px;
position: absolute;
right: 35px;
}
.next, .prev, .back{
border: 2px solid black;
border-radius: 5px;
transition: .5s;
cursor: pointer;
margin: 5px;
position: absolute;
padding: 15px;
font-size: 25px;
background: white;
}
.next:hover, .prev:hover, .back:hover{
background-color: black;
color: white;
}
.next{
right: 2%;
}
.prev{
left: 2%;
}
.back{
left: 2%;
top:50px;
}
.link_box{
height: 100px;
display: flex;
}
input {
font-size: 1.2rem;
border-radius: 5px;
color: black;
padding: 25px;
border: 3px dashed #000000;
transition: .5s;
display: inline-block;
background: whitesmoke;
border-radius: 15px;
margin-left: 30px;
width: 84%;
}
input:focus{
border: 3px solid #000000;
}
@media screen and (max-width: 1300px) {
.main_con{
position: unset;
margin-top: 150px;
}
.second_con{
height: unset;
overflow: auto;
border: none;
width: 100%;
}
.second_mini_cons{
flex-direction: column;
}
.second_img_con{
width: 100%;
height: 500px;
}
.second_data_con{
width: unset;
margin-left: unset;
overflow: unset;
margin-top: 50px;
}
.back {
left: 40px;
}
.prev {
left: unset;
right: 120px;
}
.next {
right: 40px;
}
.next, .prev, .back{
z-index: 455;
top: 25px;
}
}
@media screen and (max-width: 760px) {
.first_con{
width: 90%;
}
h2{
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
}
.drag_box{
height: unset;
}
}
@media screen and (max-width: 600px) {
.first_con{
width:100%;
max-width:unset;
height: 100vh;
border: unset;
padding-top: 50px;
overflow: auto;
margin-top: -150px;
}
.drag_box{
width: 98%;
height: unset;
margin-left: unset;
}
.button{
margin: unset;
}
.card_con{
max-height: unset;
overflow: unset;
}
.uploaded_card {
width: 100%;
margin-left: unset;
}
pre {
font-size: 15px;
overflow-x: hidden;
margin-right: 15px;
}
.second_data_con{
padding: 10px;
background-color: unset;
}
.second_con{
padding: 20px;
}
}
</style>
<link href='/css_webseite/boxicons.min.css' rel='stylesheet'>
-->
<script src="/js_webseite/exif.js"></script>
<title>Find Exif Data</title>
</head>
<body ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<div class="dimmer" id="dimmer">
<div class="popup" id="popup">
<h1>Error
<small>Please attach a file before analysing it!</small>
<div class="button" onclick="letter_index_close()">OK</div>
</div>
</div>
<div class="main_con">
<div class="back display_none" id="back" onclick="backReview()"><i class='bx bx-arrow-back' ></i></div>
<div class="prev display_none" id="prev" onclick="previousReview()"><i class='bx bx-chevron-left'></i></div>
<div class="next display_none" id="next" onclick="nextReview()"><i class='bx bx-chevron-right'></i></div>
<div class="first_con" id='first_con'>
<h1>Find an Image's Exif Data
<small>By Abdirazak Hassan</small></h1>
<div class="drag_box">
<i class='bx bx-cloud-upload upload_icon'></i>
<h2>Drag and Drop or <label for="imageUpload">Browse</label> to choose a file.</h2>
<input type='file' id="imageUpload" onchange="readURL(this);" accept=".png, .jpg, .jpeg, .gif" multiple/>
</div>
<!-- <h2 style="text-align:left; margin-left:35px; margin-top: 25px;"><label for="">Or Paste Link</label> of image below and hit enter to upload.</h2>
<input type="text" onchange="link_upload(this)" placeholder="eg: https://www.google.com"> -->
<div class="uploaded_box" id="uploaded_box">
</div>
<div class="button analyse" id='analyse_button' onclick="analyse()">Analyse</div>
</div>
<div class="second_con" id="second_con"></div>
</div>
</div>
</body>
<script>
var id;
img_array = []
var counter = 0
let rev = 0;
function readURL(input) {
if (input.files) {
Object.keys(input.files).forEach(i => {
const file = input.files[i];
var reader = new FileReader();
reader.onload = function(e) {
img_array.push([counter,e.target.result,file]);
counter = counter + 1
image = 'url('+e.target.result +')';
image_name = file.name;
image_size = file.size;
image_size = formatBytes(image_size)
if(!check_if_cards_exists()){
document.getElementById('uploaded_box').innerHTML = '<h1>Uploaded Image</h1><div class="card_con" id="card_con"></div>'
generate_card(image, image_name, image_size)
}
else{
generate_card(image, image_name, image_size)
}
}
reader.readAsDataURL(file);
})
}
else if (input) {
var reader = new FileReader();
reader.onload = function(e) {
img_array.push([counter,e.target.result,input]);
counter = counter + 1
image = 'url('+e.target.result +')';
image_name = input.name;
image_size = input.size;
image_size = formatBytes(image_size)
if(!check_if_cards_exists()){
document.getElementById('uploaded_box').innerHTML = '<h1>Uploaded Image</h1><div class="card_con" id="card_con"></div>'
generate_card(image, image_name, image_size)
}
else{
generate_card(image, image_name, image_size)
}
}
reader.readAsDataURL(input);
}
}
function generate_card(image, image_name, image_size){
document.getElementById('card_con').innerHTML += '<div class="uploaded_card" id='+ counter +'> <div class="avatar-preview"><div id="imagePreview" class="fadein" style="background-image:'+ image +';"></div></div><div class="img_values"><div class="title">'+image_name+'</div><small>'+ image_size+'</small></div><div class="cancel_card" onclick = "delete_card(this)"><i class="bx bx-x" ></i></div></div>'
avatar_preview = document.getElementsByClassName('avatar-preview')
for (let i = 0; i < avatar_preview.length; i++) {
avatar_preview[i].style.opacity = '0';
setTimeout(function(){avatar_preview[i].classList.add("fadein")}, 200);
}
}
function formatBytes(bytes, decimals = 2) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
function delete_card(that){
id = that.parentNode.id - 1
img_array.forEach(delete_card_from_array)
that.parentNode.remove()
if(!check_if_cards_exists()){
document.getElementById('uploaded_box').innerHTML = ''
}
}
function delete_card_from_array(item,arr){
if(item[0] == id){
img_array.splice(arr,1)
return true
}
}
function check_if_cards_exists(){
if(document.getElementsByClassName('uploaded_card').length !== 0){
return true;
}
else{
return false;
}
}
function dragOverHandler(ev) {
ev.preventDefault();
}
function dropHandler(ev) {
ev.preventDefault();
if (ev.dataTransfer.items) {
[...ev.dataTransfer.items].forEach((item) => {
if (item.kind === 'file') {
const file = item.getAsFile();
readURL(file)
}
});
}
}
function analyse(){
document.getElementById('analyse_button').classList.add('analyse_active')
document.getElementById('analyse_button').innerHTML = '<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle></svg>'
setTimeout(function() {
if(check_if_cards_exists()){
cancel_button = document.getElementsByClassName('cancel_card')
for (let i = 0; i < cancel_button.length; i++) {
cancel_button[i].remove()
}
document.getElementById('first_con').style.display = 'none';
document.getElementById('second_con').style.display = 'block';
document.getElementById('back').classList.remove('display_none')
if(img_array.length > 1){
show_buttons()
}
for (let i = 0; i < img_array.length; i++) {
exif_this = getExif(img_array[i][1])
exif_data = EXIF.pretty(exif_this);
if(exif_data == ''){
exif_data = 'No Exif Data Found.'
my_location = ''
}
else{
exif_data = exif_data.split(/[,]+/);
my_location = get_location(exif_this)
if(!my_location == ''){
my_location = '<div class="info_cons"><div class="info_con_title">GPS Location<div class="dropdown_icon" onclick="dropdown_toggle(this)"><i class="bx bx-chevron-down"></i></div></div><pre id="allMetaDataSpan">' + 'Latitude: ' + my_location[0] + '<br>' + 'Latitude Degree: '+ my_location[1] + '<br>' + 'Latitude Minutes: ' + my_location[2] + '<br>' + 'Latitude Seconds: ' + my_location[3] + '<br>' + '<br>' + 'Longtitude: ' + my_location[4] + '<br>' + 'Longtitude Degree: ' + my_location[5] + '<br>' + 'Longtitude Minutes: ' + my_location[6] + '<br>' + 'Longtitude Seconds: ' + my_location[7] + '<br>'+ '</pre>'+ my_location[8] +'<div class="button" style="margin:25px" >Google Maps</div></a></div>'
}
}
document.getElementById('second_con').innerHTML += '<div class="second_mini_cons"><div class="second_img_con" style="background-image: url('+ img_array[i][1] +')"></div><div class="second_data_con"><div id="second_data_title">' + img_array[i][2].name + '</div><div id="second_data_sub_title">' + 'Last modified: '+ normal_date(img_array[i][2].lastModified) + '</div>' + '<div class="info_cons"><div class="info_con_title">General Information<div class="dropdown_icon" onclick="dropdown_toggle(this)"><i class="bx bx-chevron-down"></i></div></div><pre id="allMetaDataSpan">' + 'Image size: ' + formatBytes(img_array[i][2].size) + '<br>' + 'Image type: '+ img_array[i][2].type + '</pre></div>'+'<div class="info_cons"><div class="info_con_title">Exif Data<div class="dropdown_icon" onclick="dropdown_toggle(this)"><i class="bx bx-chevron-down"></i></div></div><pre id="allMetaDataSpan">' + exif_data + '</pre></div>' + my_location +'</div></div>'
carousel(rev);
}
}
else{
letter_index_open('Error', 'Please attach a file before analysing it!')
}
}, 1000);
}
function getExif(value) {
var data;
var img2 = new Image();
img2.src = value;
EXIF.getData(img2, function() {
data = this;
});
return data
}
function letter_index_open(type, message, cta = 'OK'){
document.getElementById('popup').innerHTML = '<h1>'+ type +'<small>' + message + '</small><div class="button" onclick="letter_index_close()">'+ cta +'</div>'
document.getElementById('dimmer').style.display = 'flex';
}
function letter_index_close(){
document.getElementById('dimmer').style.display = 'none';
document.getElementById('analyse_button').classList.remove('analyse_active')
document.getElementById('analyse_button').innerHTML = 'Analyse'
}
function get_location(myData){
if(myData.exifdata.GPSLatitude || myData.exifdata.GPSLongitude){
var latDegree_nom = myData.exifdata.GPSLatitude[0].numerator;
var latDegree_denom = myData.exifdata.GPSLatitude[0].denominator;
var latDegree = latDegree_nom / latDegree_denom;
var latMinute_nom = myData.exifdata.GPSLatitude[1].numerator;
var latMinute_denom = myData.exifdata.GPSLatitude[1].denominator;
var latMinute = latMinute_nom / latMinute_denom
var latSecond_nom = myData.exifdata.GPSLatitude[2].numerator;
var latSecond_denom = myData.exifdata.GPSLatitude[2].denominator;
var latSecond = latSecond_nom / latSecond_denom
var latDirection = myData.exifdata.GPSLatitudeRef;
var latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
var lonDegree_nom = myData.exifdata.GPSLongitude[0].numerator;
var lonDegree_denom = myData.exifdata.GPSLongitude[0].denominator;
var lonDegree = lonDegree_nom / lonDegree_denom;
var lonMinute_nom = myData.exifdata.GPSLongitude[1].numerator;
var lonMinute_denom = myData.exifdata.GPSLongitude[1].denominator;
var lonMinute = lonMinute_nom / lonMinute_denom
var lonSecond_nom = myData.exifdata.GPSLongitude[2].numerator;
var lonSecond_denom = myData.exifdata.GPSLongitude[2].denominator;
var lonSecond = lonSecond_nom / lonSecond_denom
var lonDirection = myData.exifdata.GPSLongitudeRef;
var lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
var link = '<a href="http://www.google.com/maps/place/'+latFinal+','+lonFinal+'" target="_blank">'
return [latFinal, latDegree, latMinute, latSecond, lonFinal, lonDegree, lonMinute, lonSecond, link];
}
else{
return ''
}
}
function ConvertDMSToDD(degrees, minutes, seconds, direction) {
var dd = degrees + (minutes/60) + (seconds/3600);
if (direction == "S" || direction == "W") {
dd = dd * -1;
}
return dd;
}
function dropdown_toggle(that){
that.parentNode.nextElementSibling.classList.toggle('display_none')
if(that.firstElementChild.classList.contains('bx-chevron-down')){
that.firstElementChild.classList.toggle('bx-chevron-up')
}
else{
that.firstElementChild.classList.toggle('bx-chevron-down')
}
}
function normal_date(val){
const milliseconds = val// 1575909015000
const dateObject = new Date(milliseconds)
const humanDateFormat = dateObject.toLocaleString() //2019-12-9 10:30:15
dateObject.toLocaleString("en-US", {weekday: "long"}) // Monday
dateObject.toLocaleString("en-US", {month: "long"}) // December
dateObject.toLocaleString("en-US", {day: "numeric"}) // 9
dateObject.toLocaleString("en-US", {year: "numeric"}) // 2019
dateObject.toLocaleString("en-US", {hour: "numeric"}) // 10 AM
dateObject.toLocaleString("en-US", {minute: "numeric"}) // 30
dateObject.toLocaleString("en-US", {second: "numeric"}) // 15
dateObject.toLocaleString("en-US", {timeZoneName: "short"}) // 12/9/2019, 10:30:15 AM CST
return humanDateFormat
}
function show_buttons(){
document.getElementById('next').classList.remove('display_none')
document.getElementById('prev').classList.remove('display_none')
}
function previousReview() {
rev = rev - 1;
carousel(rev);
}
function nextReview() {
rev = rev + 1;
carousel(rev);
}
function backReview() {
window.location.reload();
}
function carousel(review) {
let reviews = document.getElementsByClassName("second_mini_cons");
if (review >= reviews.length) {
review = 0;
rev = 0;
}
if (review < 0) {
review = reviews.length - 1;
rev = reviews.length - 1;
}
for (let i = 0; i < reviews.length; i++) {
reviews[i].style.display = "none";
}
reviews[review].style.display = "flex";
}
// No CORS wont let this work!
// function link_upload(that){
// isvalid = validURL(that.value)
// if(isvalid){
// var img2 = new Image();
// img2.src = that.value;
// fetch(that.value)
// .then(function (response) {
// return response.blob();
// })
// .then(function (blob) {
// readURL(blob)
// });
// }
// else{
// letter_index_open('Error', 'Please upload a valid URL. eg: https://www.google.com')
// }
// }
// function validURL(str) {
// var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
// '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
// '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
// '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
// '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
// '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
// return pattern.test(str);
// }
</script>
<!--
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBK73HewkhHBVVs9nI98-HY_N7cZM_kdjE"></script>-->
</html>