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

Question

在我的项目中，我使用HTML5 Canvas和FabricJS。我有一个场景需要维护画布中放置的图像对象的纵横比。在调整角落或缩放图像时，我必须更新宽度或高度以保持图像的纵横比。上面的图片清楚地显示了我的问题。我需要一个算法或公式来维护图像的纵横比。

以下是图像应满足的要求：

1.如果我通过调整图像的宽度或高度来进行缩小，则会裁剪并以相同的纵横比显示图片。

2.如果我通过调整图像的宽度或高度来进行扩展，则会分别扩展图像的高度或宽度，并对视口的高度和宽度进行裁剪，以保持图像的纵横比。

3.隐藏的部分被平移和查看。

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

- Pravinkumar

---

抱歉，我误解了你的问题。不过不知道这个链接是否有帮助：https://dev59.com/1Gsz5IYBdhLWcg3wfn0x?rq=1 - Charlie

Answer 1

为了确保调整大小是按比例完成的，您可以将以下属性简单地添加到您的图像对象中：

lockUniScaling: true

通常我希望图像从中心缩放，因此也会将其设置为：

centeredScaling: true

要对图片进行“裁剪”需要更多的工作，因为 Fabric JS 没有提供默认的功能。我已经做了相当多的工作，但至今尚未找到针对文本、图像、矩形、多边形、圆形、旋转角度等的万无一失的解决方案。

其基础是创建两个元素 - 一个是您的图像，另一个是剪辑蒙版（通常是一种形状，如矩形、多边形等），然后将其应用为 clipTo 属性到您的图像元素上。这个解决方案在以下链接中有介绍: Multiple clipping areas on Fabric.js canvas 参考资料 - Fabric JS 文档

- PromInc

---

2023年更新，lockUniScaling属性在单个对象（如图像或矩形）上不可用。目前实现统一缩放的最佳方法是隐藏某些对象控件，例如：https://dev59.com/YLD3oIgBc1ULPQZFAk1N#70772891参考链接：https://github.com/fabricjs/fabric.js/issues/6849 - Adam Beleko

Answer 2

由于你正在使用HTML5，你可以对画布应用CSS3转换：

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

使用CSS3变换属性和缩放方法应该可以调整画布大小，并保持宽高比。但是，您可能需要解决由视网膜/高DPR显示器引起的单独缩放问题。

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

- Charlie

---

OP所讨论的是canvas对象，而不是canvas本身，因此我认为这并不适用于此处。 - kangax

这里的画布是我的容器，我正在向其中添加新图像，因此我需要调整特定图像的宽度和高度，而不是整个画布。在调整图像的宽度或高度时，我需要根据纵横比调整图像，并根据画布图像对象的宽度和高度裁剪图像。 - Pravinkumar