如何在不扭曲图像的情况下缩小图像以适应画布？答案

【问题标题】：How to scale an image down to fit inside a canvas, without distorting the image?如何在不扭曲图像的情况下缩小图像以适应画布？
【发布时间】：2015-09-01 15:26:15
【问题描述】：

我有一个织物 js 画布，允许用户向其中添加外部图像。通常，用户添加的图像太大而无法适应画布，并且他们很难正确调整它们的大小。

我想自动缩小较大的图像，以便图像保持其纵横比但适合画布。

fabric.js api 中有什么东西可以做到这一点，还是我需要计算一个比率并设置比例 x\y？

我试过了，但它会扭曲图像。

 oImg.set({
                    left: _fabicCanvas.width / 2,
                    top: _fabicCanvas.height / 2,
                    scaleY: _fabicCanvas.height / oImg.height,
                    scaleX: _fabicCanvas.width / oImg.width
                });

【问题讨论】：

@markE 哈哈，真不敢相信我错过了。
如果原始图像比所需的目标尺寸大多个尺寸，那么您将不得不分多个步骤减小原始图像的尺寸以避免缩放过程本身造成的失真。例如。如果原件是 2000x2000，而您想要 500x500，您将首先减少到 1000x1000，然后再减少到 500x500。在这里查看 K3N 的好帖子：stackoverflow.com/questions/17861447/…

标签： html canvas fabricjs

【解决方案1】：

1) 确定哪个维度超出了您要放置图像的窗口大小。如果两者都超过大小，请计算两个因素并使用最大的：

width_factor = imagewidth / allowable_width
height_factor = imageheight / allowable_height

2) 缩放两者高度和宽度相同的因子。例如。如果超过宽度：

factor = imagewidth / allowable_width

【讨论】：

@markE 这取决于用于缩放的算法，这不是这里的问题（它会影响质量，而不是失真）。 OP 的程序根据不同的因素缩放高度和宽度，这就是他的图像扭曲的原因。
我们不应该考虑浏览器问题。如果我们这样做，我们将永远被 216 色调色板这样的色差所束缚。我们最终会增加检测浏览器品牌和版本的混乱，就像我们已经拥有的那样。此外，想象一个 2002 像素的图像......我们必须将图像缩小到 501 像素以使其适合 1000x1000 像素的窗口？或者裁剪提交的图像（可能会丢失重要信息）？无论如何，这个讨论在这里并不真正相关...... ;-)
不...一点也不！如果我听起来冒犯我，我很抱歉！我倾向于听起来有点……啊……“短小”；-) 也许这是因为英语不是我的第一语言，或者我想在有限的评论框中塞进很多东西，也许这是因为我从来没有被认为是非常外交的......您（和链接的）cmets 很有趣，有用且有效，但我只是建议我们正在修复错误的一面。