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

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

来源

2014-09-11 Bilal Ahmed

我们可以看到一个实例吗？ – 2014-09-11 13:41:11

图像被挤向顶部。 – 2014-09-11 13:44:44

它发生在特定的浏览器中吗？ – FriendlyGuy 2014-09-11 14:57:22

我在PreviewImage功能注意到的第一件事是在图像被绘制在画布上：

ctx.drawImage(base_image, 0, 0, 270, 300);

最后两个CanvasRenderingContext2D.drawImage属性将调整图片的大小，而忽略纵横比， 270 x 300.如果您删除它们，图像将以其原始大小呈现。

ctx.drawImage(base_image, 0, 0);

要在画布的宽度内适合图像使用下面的：

ctx.drawImage(base_image, 0, 0, canvas.width, base_image.height * (canvas.width/base_image.width));

作为用于图像与奇异高度（〜50像素），可以是与在iOS特定问题渲染超过2MB的图像进行二次采样。有关更多信息，请参阅HTML5 Canvas drawImage ratio bug iOS。

来源

2014-09-15 15:28:52

谢谢。我尝试这个解决方案。 – 2014-09-16 07:16:55

HTML5图像适合发布在画布上

回答

相关问题