stephanbogner/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Camera</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style type="text/css">
    .cameraRoll {
        width: 130px;
        height: 130px;
        background-size: cover;
        background-position: center center;
        overflow: hidden;
        border-radius: 50%;
    }

    .fullscreen {
        width: 100%;
        height: 100%;
    }

    img {
        max-width: 100%;
        max-height: 100%;
    }
    </style>
</head>

<body>
    <!--
<input type="file" accept="image/*" id="capture" capture="camera">
<script type="text/javascript">
$("#capture").change(function() {
  var file = $('#capture')[0].files[0];
    console.log( file );
    var reader = new FileReader();
    reader.readAsDataURL(file);
});
</script> -->
    <!-- <section id="landing" class="fullscreen">
</section> -->
    <section id="main" class="fullscreen">
        <div>
            <input type="file" accept="image/*" capture="camera" id="camera" style="display: none;">
            <input type="button" value="Open Camera/Browse Photos" onclick="document.getElementById('camera').click();" />
        </div>
        <div>
            <img id="frame">
        </div>
        <div>
            <div id="cameraRoll"></div>
        </div>
    </section>
    <script>
    var camera = document.getElementById('camera');
    var frame = document.getElementById('frame');

    var cameraRoll = $("#cameraRoll")

    camera.addEventListener('change', function(e) {
        var file = e.target.files[0];
        console.log('file=' + URL.createObjectURL(file));
        // Do something with the image file.
        frame.src = URL.createObjectURL(file);
        addImageToView(file)
    });

    function addImageToView(file) {
        var photo = $('<div><div/>');
        photo.css({ 'background-image': "url('" + URL.createObjectURL(file) + "')" });
        photo.addClass('cameraRoll');
        cameraRoll.prepend(photo);
    }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Camera</title>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style type="text/css">
	.cameraRoll {
	width: 130px;
	height: 130px;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	border-radius: 50%;
	}

	.fullscreen {
	width: 100%;
	height: 100%;
	}

	img {
	max-width: 100%;
	max-height: 100%;
	}
	</style>
	</head>

	<body>
	<!--
	<input type="file" accept="image/*" id="capture" capture="camera">
	<script type="text/javascript">
	$("#capture").change(function() {
	var file = $('#capture')[0].files[0];
	console.log( file );
	var reader = new FileReader();
	reader.readAsDataURL(file);
	});
	</script> -->
	<!-- <section id="landing" class="fullscreen">
	</section> -->
	<section id="main" class="fullscreen">
	<div>
	<input type="file" accept="image/*" capture="camera" id="camera" style="display: none;">
	<input type="button" value="Open Camera/Browse Photos" onclick="document.getElementById('camera').click();" />
	</div>
	<div>
	<img id="frame">
	</div>
	<div>
	<div id="cameraRoll"></div>
	</div>
	</section>
	<script>
	var camera = document.getElementById('camera');
	var frame = document.getElementById('frame');

	var cameraRoll = $("#cameraRoll")

	camera.addEventListener('change', function(e) {
	var file = e.target.files[0];
	console.log('file=' + URL.createObjectURL(file));
	// Do something with the image file.
	frame.src = URL.createObjectURL(file);
	addImageToView(file)
	});

	function addImageToView(file) {
	var photo = $('<div><div/>');
	photo.css({ 'background-image': "url('" + URL.createObjectURL(file) + "')" });
	photo.addClass('cameraRoll');
	cameraRoll.prepend(photo);
	}
	</script>
	</body>

	</html>