s-yoshiki/index.html

## index.html
<body>
    <input type="file" id="file">
    <canvas id="canvas"></canvas>

    <script>
        document.getElementById("file").addEventListener("change", function (e) {
            var file = e.target.files;
            var reader = new FileReader();

            //ファイルが複数読み込まれた際に、1つめを選択
            reader.readAsDataURL(file[0]);

            //ファイルが読み込めたら
            reader.onload = function () {
                var src = reader.result;
                drawCanvas(src);
            };
        }, false);

        function drawCanvas(source) {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var context = canvas.getContext('2d');
                var image = new Image();
                image.src = source;
                image.onload = function () {
                    canvas.width = image.width;
                    canvas.height = image.height;
                    context.drawImage(image, 0, 0);
                };
            }
        }
    </script>
</body>
	<body>
	<input type="file" id="file">
	<canvas id="canvas"></canvas>

	<script>
	document.getElementById("file").addEventListener("change", function (e) {
	var file = e.target.files;
	var reader = new FileReader();

	//ファイルが複数読み込まれた際に、1つめを選択
	reader.readAsDataURL(file[0]);

	//ファイルが読み込めたら
	reader.onload = function () {
	var src = reader.result;
	drawCanvas(src);
	};
	}, false);

	function drawCanvas(source) {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext) {
	var context = canvas.getContext('2d');
	var image = new Image();
	image.src = source;
	image.onload = function () {
	canvas.width = image.width;
	canvas.height = image.height;
	context.drawImage(image, 0, 0);
	};
	}
	}
	</script>
	</body>