如何在 HTML5 Canvas 上缩放图像时保持纵横比？

Question

在我的项目中，我使用的是 HTML5 Canvas 和 FabricJS。我有一个场景来保持我放置在画布中的图像对象的纵横比。在调整角或缩放图像时，我必须更新宽度或高度以保持图像的纵横比。

上面的图片将清楚地显示我的问题。我需要一个算法或公式来保持图像的纵横比。

图片应满足以下条件，

1. 如果我通过根据实际尺寸调整图像的宽度或高度来进行缩小，它将裁剪并以相同的纵横比显示图片。
2. 如果我通过从实际尺寸调整图像的宽度或高度来进行扩展，它将分别扩展图像的高度或宽度，并针对视口高度和宽度进行裁剪以保持纵横比。
3. 可以平移和查看隐藏的部分。

请给我一些解决方案，谢谢。

Answer 1

为确保按比例调整大小，您只需将以下属性添加到您的图像对象：

lockUniScaling: true

我通常希望图像从中心缩放，因此也要设置：

centeredScaling: true

但是要“裁剪”图像；这需要更多的努力，因为这不是 Fabric JS 提供的默认功能。我已经为此做了很多工作，但还没有想出一个适用于文本、图像、矩形、多边形、圆形、旋转角度等的防弹解决方案。

这背后的基础是创建两个元素 - 一个是您的图像，第二个是您的剪贴蒙版（通常是一种形状，例如矩形、多边形等），然后将其作为 clipTo 属性应用于您的图像元素。该解决方案包含在： Multiple clipping areas on Fabric.js canvas

参考资料 - Fabric JS Documentation

Answer 2

当您使用 HTML5 时，您可以将 CSS3 转换应用到画布：

canvas {
    -ff-transform: scale(2); 
    -ms-transform: scale(2); 
    -webkit-transform: scale(2); 
}

使用 CSS3 的 transform 属性和 scale 方法应该调整画布的大小，并保持你的纵横比。这也是

但是，您可能需要解决由视网膜/高 dpr 显示器引起的单独缩放问题。

更多关于 CSS3 转换属性的信息可以在这里找到： https://developer.mozilla.org/en-US/docs/Web/CSS/transform