在iOS Safari中缩放并将图像绘制到canvas时，宽度是正确的，但高度会被压扁
我正在加载图像，然后将该图像绘制到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上，此确切代码正确显示。
var ratio =（width / img.width）* img.width; 将使得比率等于宽度并且没有从img.width中学到任何东西，因为你用相同的值乘以除法除法。 这会弄乱你的高度计算，这将弄乱绘制的图像。
试试这样：
var ratio = ( width / img.width );
并且你将获得canvas和图像高度之间的真实比率。 但无论如何，我认为你不想这样。
你想要的是保持图像的纵横比（宽度/高度）相同，并缩小它以适应。 即使canvas具有不同的纵横比，也可以通过在侧面或顶部和底部留下未使用的空间来实现。
所以你真正需要知道的是你应该用它来缩放图像。 宽度或高度。
如果图像的宽高比大于canvas，则使用宽度进行缩放。 这意味着使宽度相同并将高度设置为保留图像宽高比的任何值。 这将留下空白的顶部和/或底部。
如果图像的宽高比低于canvas，则使用高度进行缩放。 Blah blah身高一样。 比例宽度。 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 ); }
此外，如果您没有对图像进行任何剪切，只进行缩放，那么这些参数就是您所需要的。
这是iOS Safari中的一个错误。 它在这里描述： Mobile Safari渲染在Canvas上缩放？
解决方案在这里： https ： //github.com/stomita/ios-imagefile-megapixel
问题
如果您的图像具有非常高的分辨率（大于1024×1024），则会对其进行二次采样（将像素数减少16倍）。 执行此操作时，Safari会引入错误，导致垂直高度过小。
解
要解决这个问题，你需要获取一小部分图像（比如从文件读取到块中的缓冲区），调整垂直高度差，将其绘制到临时canvas，然后将临时canvas’像素绘制到目标canvas。