javascript - 在 iOS Safari 中缩放图像并将其绘制到 Canvas 时，宽度正确但高度被压缩

Question

我正在加载图像，然后将该图像绘制到 Canvas 上。我还缩小图像以适合 Canvas 。当我这样做时，图像以适当的宽度绘制到 Canvas 上，但高度约为 Canvas 实际高度的 1/4。

//Calculate height from canvas-to-image width ratio
var width = canvas.width;
var height = ( width / img.width ) * img.height;

//Draw scale image (This results in a squished height, despite "height" being correct)
context.drawImage( image, 0, 0, img.width, img.height, 0, 0, width, height );

即使 height 是正确的(在控制台中检查过)，图像以更小的高度绘制到 Canvas 上。

此外，当我检查 canvas.width/canvas.height 与 img.width/img.height 的比率时，我得到: .707234 vs .707818。太接近了，无法解释巨大的高度问题。

为什么会这样？我该如何解决这个问题？

编辑:在 Chrome 上，这段代码正确显示。

Answer 1

var ratio = ( width/img.width ) * img.width;将留下 ratio 等于 width 并且没有从 img.width 中学到任何东西，因为你正在用相同的值乘以撤消除法。这会打乱您的高度计算，从而打乱绘制的图像。

像这样尝试:

var ratio = ( width / img.width );

您将获得 Canvas 和图像高度之间的真实比率。但我不认为你想要那样。

您想要的是保持图像的纵横比(宽度/高度)不变，并将其缩小以适合。即使 Canvas 具有不同的纵横比，也可以通过在侧面或顶部和底部留下未使用的空间来实现。

因此，您真正需要知道的是应该使用哪个来缩放图像。宽度或高度。

如果图像的纵横比大于 Canvas 的纵横比，则使用宽度进行缩放。这意味着使宽度相同并将高度设置为保持图像纵横比的任何值。这将在顶部和/或底部留下空白。

如果图像的纵横比低于 Canvas ，则使用高度进行缩放。 Blah blah 高度相同。刻度宽度。两侧空白。

var imgRatio = img.width / img.height;
var canRatio = canvas.width / canvas.height;

var scaledWidth = img.width * (canvas.height / img.height);
var scaledHeight = img.height * (canvas.width / img.height);

if (imgRatio > canRatio) {
    context.drawImage( image, 0, 0, canvas.width, scaledHeight );
} else {
    context.drawImage( image, 0, 0, scaledWidth, canvas.height );
}

此外，如果您不对图像进行任何裁剪，仅进行缩放，那么这些参数就是您所需要的。

http://www.w3schools.com/tags/canvas_drawimage.asp