如果图像宽度大于画布，则在画布中对齐图像答案

【问题标题】：Align image in canvas if image width is bigger than canvas如果图像宽度大于画布，则在画布中对齐图像
【发布时间】：2019-10-31 00:34:53
【问题描述】：

我有一个比例为 1724:1078（宽：高）的图像。现在我需要将该图像居中在画布内，即 800:1078。这个场景与下面的代码完美搭配：

ctx.drawImage(this.leftImageResized, ((this.thumbnailWidth/2)-this.leftImageResized.width)/2, (this.thumbnailHeight-this.leftImageResized.height)/2);

但我不知道如何将图像放置在画布的左侧和画布的右侧，因为图像比画布本身更宽。我基本上需要实现的是将图像的左侧放置在画布的开头，在第二种情况下将图像的右侧放置在画布的右侧。我已经尝试将下面的代码定位到左侧：

  ctx.drawImage(this.leftImageResized, 0, 0);

但此代码无法按预期工作。基本上它会裁剪出图像的一部分，尽管图像位于左侧，但左侧图像的一部分不在视野范围内......

编辑：这个问题与指出为重复的问题没有一个共同点，我根本不是在模拟封面，相反我的图像应该被剪切但在不同的上下文中。正如您在下图中看到的那样，这个场景是我需要覆盖的场景，图像可以更大，但我需要它与画布的左边缘和右边缘对齐。

【问题讨论】：

你需要画出你想要发生的事情的图表。从你的问题中根本不清楚。听起来你想要这里介绍的“约束”：stackoverflow.com/questions/29399093/…
您的图表不明确。什么是图像，什么是画布？从图中看起来您希望图像垂直大小以填充画布，然后能够选择向左或向右对齐。图像可能会或可能不会被剪裁，并且可能会或可能不会触及相对边缘。那是对的吗？您的问题以“我需要使图像居中”开始，然后您继续不将图像居中。你能澄清一下吗？

【解决方案1】：

如果我理解正确，这是您的情况的示意图：

 leftImageResized
|------------------|


       canvas
       |----|


 => left margin
|------|

如果这个表示是正确的，你的左边距的宽度等于 (width image - width canvas) / 2

因此替换

((this.thumbnailWidth/2)-this.leftImageResized.width)/2

由

-(this.leftImageResized.width - this.thumbnailWidth)/2

应该解决它

【讨论】：