Question

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

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

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

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

Answer 1

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

对于具有奇异高度（~50px）的图像渲染，这可能是iOS特定问题，与2MB以上的图像进行二次采样。有关详细信息，请参阅HTML5 Canvas drawImage ratio bug iOS。

HTML5图像适合画布中的问题

1 个答案: