如何在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转换属性与scale方法一起使用时，应调整画布的大小，并保持纵横比。它也是

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

有关CSS3转换属性的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/transform