amundo/image_labeler.html

## image_labeler.html
<!DOCTYPE html>
<html>
<head>
<title>image</title>
<link rel=stylesheet href=style.css />
<meta charset="utf-8"/>
</head>
<body>
<p><label>Add image<input type="file" id="input"/></label></p>
<p><input type=text placeholder="add caption" id=caption /><button id=add_caption>add caption</button><button id=save>save</button></p>
<canvas width="500" height="500" id="canvas"></canvas>
<script>

var find = document.querySelector;

window.onload = function() {
    var input = document.getElementById('input');
    input.addEventListener('change', handleFiles);
}

function addCaption(caption) {
    //var caption = document.getElementById('caption').value;
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.font = "bold 100px Gentium";
    ctx.fillText(caption, 100, 100);
}

document.querySelector('#add_caption').onclick = function(){
  addCaption(document.querySelector('#caption').value);
}

document.querySelector('#save').onclick = function(){
  window.open(document.getElementById('canvas').toDataURL("image/png"));

}

function handleFiles(e) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var reader = new FileReader;
    reader.onload = function(event) {
        var img = new Image;
        img.src = event.target.result;
        img.onload = function() {
            ctx.drawImage(img, 0,0);
        }
    }
    reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>image</title>
	<link rel=stylesheet href=style.css />
	<meta charset="utf-8"/>
	</head>
	<body>
	<p><label>Add image<input type="file" id="input"/></label></p>
	<p><input type=text placeholder="add caption" id=caption /><button id=add_caption>add caption</button><button id=save>save</button></p>
	<canvas width="500" height="500" id="canvas"></canvas>
	<script>

	var find = document.querySelector;

	window.onload = function() {
	var input = document.getElementById('input');
	input.addEventListener('change', handleFiles);
	}

	function addCaption(caption) {
	//var caption = document.getElementById('caption').value;
	var ctx = document.getElementById('canvas').getContext('2d');
	ctx.font = "bold 100px Gentium";
	ctx.fillText(caption, 100, 100);
	}

	document.querySelector('#add_caption').onclick = function(){
	addCaption(document.querySelector('#caption').value);
	}

	document.querySelector('#save').onclick = function(){
	window.open(document.getElementById('canvas').toDataURL("image/png"));

	}

	function handleFiles(e) {
	var ctx = document.getElementById('canvas').getContext('2d');
	var reader = new FileReader;
	reader.onload = function(event) {
	var img = new Image;
	img.src = event.target.result;
	img.onload = function() {
	ctx.drawImage(img, 0,0);
	}
	}
	reader.readAsDataURL(e.target.files[0]);
	}
	</script>
	</body>
	</html>