时间戳

首页 > 解决方案 > 使 HTML 画布作为图像源适合纵横比？

javascript - 使 HTML 画布作为图像源适合纵横比？

问题描述

我目前正在尝试用 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

这是我在一般与移动设备上的 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%;
        }

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

它是如何在计算机浏览器上绘制的

对比

它是如何在手机上显示的 （手机处于横向模式）

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

提前致谢，

阿普。

标签： javascripthtmlcanvasresponsive-imagestodataurl

解决方案

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

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

推荐阅读