Javascript 缩放图像以适合画布，同时保持纵横比。

我正在尝试找出如何在画布上渲染图像，更改画布缩放以最适合图像（最小尺寸为50%缩放），并允许用户在画布上平移以查看图像的其余部分（如果图像不适合屏幕）

我一直在写一个图像裁剪器，我注意到我遇到的两个问题是

• 当图像太大时，它会从画布上剪掉
• 当图像太大时，它会占据整个屏幕

通过限制画布的大小和更改图像的缩放，我应该能够减少这些问题。如果图像仍然太大，您可以在屏幕周围平移。这是一个我正在寻找的图像示例

---

其中红色是画布元素，粉色是图像。（显示在画布上，两侧突出）。因此，用户应该能够向左或向右平移，看到图像中不适合屏幕的部分

你确定要这么做吗？这是可能的，但是您必须附加一系列事件来检测用户何时滚动并更新图像的位置。为什么不将画布的宽度设置为图像的宽度，并用少量css修复整个问题？另外，画布中还有其他东西吗？@kaido-有一个裁剪工具可以调整大小，用于裁剪图像。我确信我想这样做，因为对于我的应用程序来说，用户能够裁剪图像（成正方形）是至关重要的。不幸的是，现在大多数库都不能使用Cordova，所以我不得不研究自己的解决方案。哦，我的错，当然，如果你有一个裁剪工具，你已经有了这些事件。现在，如果您在图片上并根据这些事件更改

drawImage（图像，x，y，宽度，高度）

的x值，应该很容易确定