Verkehrsordnungswidrigkeitenanzeige bei Halt- und Parkverstößen
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="navElements" class="remove" style="position: fixed; left: 25px; top: 5px; padding: 5px; text-align: center; line-height: 25px; font-size: 20px; border: 0px solid lime; zoom: reset;">
<fieldset style="position: relative; float: left; background-color: rgba(190,190,190,0.4); font-size: small; text-shadow: 2px 2px 4px white; padding: 5px;">
<legend style="background-color: rgba(210,210,210,0.8); font-size: 80%; text-shadow: 2px 2px 4px white; box-shadow: 2px 2px 4px grey;">In 4 Schritten zur Anzeige</legend>
<ol>
<li><button onClick="document.getElementsByName('Anrede')[0].focus(); return false;">Adresse eingeben</button><br></li>
<li><button onClick="document.getElementsByName('Verkehrsverstoß')[0].focus(); return false;">Vorwurf auswählen</button><br></li>
<li><button onClick="document.getElementById('imgfiles').click(); return false;">Bilder auswählen</button><br></li>
<li><button onClick="document.getElementById('sendMail').click(); return false;">E-Mail erzeugen</button><br></li>
</ol>
</fieldset>
<!--
<div style="position: relative; float: right; border: 0px solid blue;">
<input type="button" value="^^" style="width: 2.5em" onClick="var actionElement = (document.scrollingElement || document.body); actionElement.scrollTop = 0; return false;"><br>
<input type="button" value="+" style="width: 2.5em" onClick="var actionElement = document.getElementsByTagName('body')[0]; actionElement.style.zoom = (parseFloat(window.getComputedStyle(actionElement, null).getPropertyValue('zoom')) * 1.2); return false;"><br>
<input type="button" value="*" style="width: 2.5em" onClick="var actionElement =...
CSS
body {
font-family: Helvetica, Arial, sans-serif;
/* font-size: 2.2vh; */
zoom: 66.67%;
}
h3 {
color: #b5050e;
}
input,
textarea {
width: 32em;
}
ol>li {
padding-bottom: 1em;
}
JavaScript
function resizeImageToDataUri(img, width, height) {
// create an off-screen canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// set its dimension to target size
canvas.width = width;
canvas.height = height;
var size = img.src.length;
console.log({size, width, height});
// draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, width, height);
// encode image to data-uri with base64 version of compressed image
var quality = 0.5;
var result = canvas.toDataURL('image/jpeg', quality); // quality = [0.0, 1.0]
console.log(result.length);
//document.getElementsByTagName('body')[0].appendChild(canvas);
return result;
} // END OF function imageToDataUri()
function selectElementContents(element) {
var range = document.createRange();
range.selectNodeContents(element);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
} // END OF function selectElementContents()
function toDecimal(number) {
if (typeof(number) != "undefined") {
return number[0].numerator + number[1].numerator /
(60 * number[1].denominator) + number[2].numerator / (3600 * number[2].denominator);
} else {
return 0;
}
} // END OF function toDecimal()
function reverseGeoLocate(latlng, targetElement) {
// asynchronous call to Google API
geocoder.geocode({
'location': latlng
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK && results[0]) {
var formatted_address = results[0].formatted_address;
targetElement.innerHTML = formatted_address;
} else {
window.alert('Geocoder failed due to: ' + status);
}
}); // END OF geocoder
} // END OF function reverseGeoLocate()
function reverseGeotagImage(imgfile, container) {
EXIF.getData(imgfile, function() {
if (!EXIF.getTag(this, 'GPSDateStamp')) {
return false;
}
var lat = toDecimal(EXIF.getTag(this, 'GPSLatitude'));
var...