html5画布可以p图,HTML5图像适合发布在画布上

我正在研究HTML5移动应用程序。我正在使用画布元素和文件上传元素。 每当用户从手机上点击这个文件上传元素。他看到两种选择。 1.选择现有的照片 2.拍摄新照片HTML5图像适合发布在画布上

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

我的HTML代码：

我的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);

}

};

}

找遍许多网站也没有找到这个问题的解决方案。 有什么帮助吗？

+0

我们可以看到一个实例吗？ –

2014-09-11 13:41:11

+0

图像被挤向顶部。 –

2014-09-11 13:44:44

+0

它发生在特定的浏览器中吗？ –

2014-09-11 14:57:22