我正在开发适用于iPhone的HTML5应用程序。每当我从拍摄照片选项中选择文件并将其放在画布中。它被挤向顶部。我无法找出原因。
我之前已经问过这个问题并搜索了很多网站但是找不到这个问题的解决方案。有什么帮助吗?
演示图片
请查看this图片以查看问题。新拍照片不占用空间,直到清除按钮。
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);
}
};
}