I am working on HTML5 application for iPhone. Whenever I choose file from take photo option and place it in canvas. It gets squeezed towards top. I am unable to find out the reason.
I have asked this question before and searched many sites but could not find solution of this issue. Any help?
Demo Image
Please find this image to see the issue. Newly taken photo does not occupy space till clear button.
Html Code:
<canvas id="myCanvas" width="270" height="300"></canvas>
<input type="file" id="uploadImage" name="upload" value="Upload" onchange="PreviewImage();" />
Javascript Code:
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
var canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 270, 300);
imageUrl = oFREvent.target.result;
var base_image = new Image();
base_image.src = imageUrl;
base_image.onload = function () {
ctx.drawImage(base_image, 0, 0, 270, 300);
}
};
}
