<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="imageCanvas" width="700" height="700" style="border:1px solid #d3d3d3;"></canvas>
<script>
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
ctx.save();
var scal = 0;
var scalW = 1 / img.width * canvas.width;
var scalH = 1 / img.height * canvas.height;
if(scalW <= scalH) scal = scalH;
else scal = scalW;
ctx.scale(scal, scal);
ctx.drawImage(img,0,0);
ctx.restore();
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html> |
