Question

我正在加载图像，然后将该图像绘制到画布上。我也缩小图像以适应画布。当我这样做时，图像以适当的宽度绘制到画布上，但高度约为画布的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。这是＆＃39; s如此接近它无法解释巨大的高度问题。

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

编辑：在Chrome上，此确切代码正确显示。

Answer 1

var ratio =（width / img.width）* img.width;将使得比率等于宽度并且没有从img.width中学到任何东西，因为你通过乘以相同的值来撤消除法。这会弄乱你的高度计算，这会弄乱绘制的图像。

试试这样：

var ratio = ( width / img.width );

并且您将获得画布和图像高度之间的实际比率。但无论如何，我不认为你想要那样。

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

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

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

如果图像的纵横比低于画布，则使用高度进行缩放。 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 );
}

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

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

Answer 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会引入一个错误，导致垂直高度过小。

<强>解决方案

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

在iOS Safari中缩放并将图像绘制到画布时，宽度是正确的，但高度会被压扁

2 个答案: