画布中的 HTML5 图像适合问题

Posted 2023-03-15

【中文标题】画布中的 HTML5 图像适合问题

【英文标题】：HTML5 Image fit Issue in Canvas

【发布时间】：2014-09-11 13:37:43

【问题描述】：

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

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

我的 HTML 代码：

<canvas id="myCanvas"  ></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);
    
    ;

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

【问题讨论】：

我们可以看一个活生生的例子吗？

图像被挤向顶部。

是否发生在特定的浏览器中？

您能否展示导致问题的代码，即拍摄并绘制它的代码？

实际上当我在移动浏览器中运行提到的代码时，它会自动给出上面提到的两个选项。我没有为它写任何具体的代码。

【参考方案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）的图像渲染，这可能是与超过 2MB 的图像被二次采样相关的 ios 特定问题。请参阅HTML5 Canvas drawImage ratio bug iOS 了解更多信息。

【讨论】：

谢谢。我试试这个解决方案。