使 HTML 画布作为图像源适合纵横比？答案

【问题标题】：Make HTML canvas as image source fit the aspect ratio?使 HTML 画布作为图像源适合纵横比？
【发布时间】：2019-05-27 08:49:45
【问题描述】：

我目前正在尝试用 HTML/CSS/PHP 制作一个图片应用程序，在制作应用程序后，我正在尝试使其对移动设备友好/响应。

我在其他玩家的屏幕上显示正在绘制的画布的方式是这样的：

javascript

let canvas = document.querySelector("canvas");
    let base64dotpng = canvas.toDataURL();
    ws.send("canvas:" + base64dotpng);

我通过 websocket 发送。这工作得很好，当我像这样读回数据时：

let ctx = document.querySelector("canvas").getContext('2d');
let canvasImage = new Image();
canvasImage.src = msg;
if (newRound) {
    ctx.clearRect(0, 0, window.innerWidth * 0.525, window.innerHeight * 0.90);
}
ctx.drawImage(canvasImage, 0, 0);

但是现在我正在实现一个移动版本，每当我在移动设备上加载画布时，画布的比例有点不同，它不会加载完整的图像。

css

这是我在通用 vs 移动端的 css：

一般：

#drawingCanvas {
        display: inline-block;
        background-color: white;
        border-width: 0.3vh;
        border-color: black;
        border-style: solid;
        position: absolute;
        height: 90vh;
        top: 5vh;
        left: 20vw;
        width: 52.5vw;
    }

手机：

canvas#drawingCanvas {
            z-index: 1;
            top: 0;
            margin-left: -20%;
            display: inline-block;
            width: 52.5%;
            height: 99%;
        }

如果要在移动设备上拉伸画布，那很好，但现在这就是区别：

how it is being drawn on a computer browser

对

how it is getting displayed on mobile （手机处于横向模式）

所以画布似乎正在以全尺寸加载

提前致谢，

Aap。

【问题讨论】：

请尝试在 javascript 中而不是在 CSS 中设置画布宽度和高度。对于 100% 宽度，您可以使用 canvas.width = window.innerWidth，对于 100% 高度，您可以使用 canvas.height = window.innerHeight。

标签： javascript html canvas responsive-images todataurl

【解决方案1】：

我在context的.drawImage方法中找到了答案。

第 4 和第 5 个参数可用于重新缩放画布，如下所示：

  if (isMobile){
        ctx.drawImage(canvasImage, 0,0,canvasImage.width*(window.innerWidth / (canvasImage.width/0.525)),canvasImage.height*(window.innerHeight/(canvasImage.height/0.9)));
    } else {
        ctx.drawImage(canvasImage, 0, 0);
    }

【讨论】：