Canvas中宽于画布的图片左/右对齐实现疑问

我明白你的需求了——你有一张宽高比1724:1078的图片，要放在800×1078的画布上，已经搞定了居中，但左对齐、右对齐（图片宽于画布，需要裁剪超出部分）一直没弄对对吧？

问题出在你没找对图片的水平偏移量计算方式，我给你梳理下正确的实现逻辑：

左对齐实现 #

要让图片左侧和画布左边缘完全对齐，只需要把图片的水平起始坐标设为0，垂直方向保持居中（如果图片高度和画布高度一致，直接设0就行）。这时候画布会显示图片最左侧的800像素区域，右侧超出的部分会被自动裁剪，完全符合你的左对齐需求：

// 左对齐代码
ctx.drawImage(this.leftImageResized, 0, (this.thumbnailHeight - this.leftImageResized.height)/2);

如果你的leftImageResized高度和画布高度thumbnailHeight都是1078，那y坐标可以直接写0，不用计算

右对齐实现 #

要让图片右侧和画布右边缘对齐，得反向计算水平偏移量：x坐标 = 画布宽度 - 图片宽度。这样图片的右侧边缘会刚好和画布右边缘重合，画布显示的是图片最右侧的800像素区域，左侧超出部分被裁剪：

// 右对齐代码
ctx.drawImage(this.leftImageResized, this.thumbnailWidth - this.leftImageResized.width, (this.thumbnailHeight - this.leftImageResized.height)/2);

同样，如果图片高度和画布高度一致，y坐标可以简化为0。

关于你之前的尝试 #

你用ctx.drawImage(this.leftImageResized, 0, 0)没达到预期，可能是误解了效果：左对齐时图片右侧必然会被裁剪（毕竟图片比画布宽），但左侧是完全贴合画布左边缘的，不会超出可视范围。如果实际显示左侧超出，建议检查下leftImageResized的缩放逻辑，确认图片的宽高比还是1724:1078，有没有不小心改了图片的尺寸或原点。

内容的提问来源于stack exchange，提问作者myoda999