在 iOS Safari 中缩放和绘制图像到画布时，宽度正确但高度被挤压答案

【问题标题】：When scaling and drawing an image to canvas in iOS Safari, width is correct but height is squished在 iOS Safari 中缩放和绘制图像到画布时，宽度正确但高度被挤压
【发布时间】：2023-03-12 19:45:01
【问题描述】：

我正在加载图像，然后将该图像绘制到画布上。我也在缩小图像以适合画布。当我这样做时，图像以适当的宽度绘制到画布上，但高度约为画布实际高度的 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.width / canvas.height 与img.width / img.height 的比率时，我得到：.707234 与.707818。 这太接近了，无法解释巨大的高度问题。

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

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

【问题讨论】：

这是什么意思：var ratio = (width / img.width) * img.width;?
@能否给出缩放高度
(x/y) * y 就是 x。只要 y 不为零，它就不会改变。我认为这不是你想要的。
@CandiedOrange 请查看我对您的回答的评论。我错误地复制了我的代码，但发现另一个有真正错误的帖子。

标签： javascript ios ipad canvas mobile-safari

【解决方案1】：

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

试试这样：

var ratio = ( width / img.width );

您将获得画布和图像高度之间的真实比例。但我认为你无论如何都不想那样。

您想要的是保持图像的纵横比（宽度/高度）相同并将其缩小以适应。即使画布具有不同的纵横比，通过在侧面或顶部和底部留出未使用的空间，这也是可能的。

所以你真正需要知道的是你应该使用哪个来缩放你的图像。宽度或高度。

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

如果图像的纵横比低于画布，则使用高度进行缩放。呸呸呸身高一样。刻度宽度。 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

【讨论】：

抱歉，我错误地复制了我的代码。我已经把它固定在上面了。这是 iOS Safari 中的一个错误：stackoverflow.com/questions/12554947/…

【解决方案2】：

这是 iOS Safari 中的一个错误。这里有描述：Mobile Safari renders <img src="data:image/jpeg;base64..."> scaled on Canvas?

解决方案在这里：https://github.com/stomita/ios-imagefile-megapixel

问题

如果您的图像分辨率非常高（大于 1024x1024），则会对其进行二次采样（将像素数减少 16 倍）。这样做时，Safari 会引入一个错误，导致垂直高度过小。

解决方案

要解决这个问题，您需要获取图像的小块（例如从文件中分块读取到缓冲区中），调整垂直高度差，仅将这些图像绘制到临时画布上，然后绘制该临时画布'像素到目标画布。

【讨论】：