缩放HTML5画布上下文以垂直适应图像

Question

我正在开发一个显示图像的canvas网络应用程序，并试图防止用户平移和缩放以使他们看不到超出图像图像高度的内容。如何缩放画布上下文，以使其相对于画布的垂直高度适合图像的垂直高度？ 我没有尝试缩放图像，因为我已经看到了很多解决方案，因此我需要画布上下文来缩放图像。

防止平移超出高度（上下）很简单，但是对于设置正确的比例以防止用户缩放得太远，我一无所知。

image.onload = () => {
    ctx.translate(-image.width/4, -image.height/4); 
    animate();
}

在这里，我将上下文转换为我想要的图像中的位置，然后开始绘制，这是正确转换的理想位置。

Answer 1

我自己弄清楚了答案，这是一个简单的例子，知道canvas.height = scale * image.height，可以将这个等式重新排列为scale = canvas.height/image.height。

当然，重要的是要注意，这仅在当前比例转换为1时有效，否则比例将需要相对于您当前的比例转换。