图像没有填满整个画布空间

Question

我正在研究移动设备的HTML5应用程序。我正在使用canvas元素和文件上传元素。每当用户从移动设备点击此文件上传元素时。他看到了两种选择。

1. 选择现有照片
2. 拍摄新照片

如果他选择现有的照片，这在我的画布上很好用，但如果他点击新照片，它就不适合画布。宽度很好，但画布中显示的点击图像的高度不超过50像素。

我只在iPhone中遇到此问题。

HTML

<canvas id="myCanvas" width="270" height="300"></canvas>
<input type="file" id="uploadImage" name="upload" value="Upload" onchange="PreviewImage();" />

的Javascript

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);
  }
 };
}

我搜索了很多网站但找不到此问题的解决方案。有什么帮助吗？

附件

查看this图片以查看演示图片。