benchmark/gps-dnd.html

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1,user-scalable=yes"/>
	<title>GPS Benchmark</title>
	<style>
		html, body {
			padding: 0;
			margin: 0;
			height: 100%;
		}
		body {
			font-family: monospace;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			font-size: 16px;
		}
		.red {
			color: #cc0000;
		}
		.green {
			color: #59b101;
		}
		#log {
			padding: 10px;
			white-space: pre;
		}
		#map {
			flex: 1;
		}
		input[type="file"] {
			opacity: 0;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>

	<input type="file" multiple>

	<div id="log">Drop files here<br>or click to open file picker</div>
	<div id="map"></div>

	<script src="https://maps.googleapis.com/maps/api/js"></script>
	<script type="module">
		import exifr from '../src/bundles/full.mjs'
		import {gpsOnlyOptions, Exifr} from '../src/bundles/full.mjs'

		let $log = document.querySelector('#log')
		let memUsed = 0

		let dropzone = document.body
		dropzone.addEventListener('dragenter', e => e.preventDefault())
		dropzone.addEventListener('dragover', e => e.preventDefault())
		dropzone.addEventListener('drop', e => {
			e.preventDefault()
			handleFiles(e.dataTransfer.files)
		})

		document.querySelector('input[type="file"]').addEventListener('change', e => {
			e.preventDefault()
			handleFiles(e.target.files)
		})

		async function handleFiles(files) {
			files = Array.from(files)
			let totalBytes = sum(files.map(f => f.size))
			let [time, memory] = await parseAndMeasureImages(files)
			$log.innerHTML = [
				`files:     <strong>${files.length}</strong> = <strong class="red">${(totalBytes / 1024 / 1024).toFixed(1)} MB</strong>`,
				`RAM used:  <strong class="green">${(memory / 1024 / 1024).toFixed(1)} MB</strong>`,
				`parsed in: <strong class="green">${Math.floor(time)} ms</strong> (${(time / files.length).toFixed(1)} ms per file)`,
			].join('\n')
		}

		async function parseAndMeasureImages(files) {
			memUsed = 0
			let m1 = performance.memory.usedJSHeapSize
			let t1 = performance.now()
			let promises = files.map(exifr.gps).map(promise => promise.catch(() => {}))
			let coords = await Promise.all(promises)
			let m2 = performance.memory.usedJSHeapSize
			let t2 = performance.now()
			renderMap(coords)
			return [t2 - t1, m2 - m1]
		}

		function sum(arr) {
			let num = 0
			for (let item of arr) num += item
			return num
		}

		function renderMap(coords) {
			let map = new google.maps.Map(document.querySelector('#map'), {
				navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
				mapTypeControl: false,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			})
			coords = coords.filter(coord => coord)
			let points = coords.map(coord => new google.maps.LatLng(coord.latitude, coord.longitude))
			var bounds = new google.maps.LatLngBounds()
			points.forEach(point => bounds.extend(point))
			map.fitBounds(bounds)
			let markers = points.map(point => new google.maps.Marker({map, position: point}))
		}

	</script>

</body>
</html>