Question

我希望能够在HTML5画布元素上绘制图像，其中图像的大小调整为画布宽度，但不调整高度。基本上我希望它将高度裁剪到画布高度，而不是尝试缩放宽度和高度。

例如，如果我在320 x 150的画布上绘制图像。我希望我的图像缩小到320的宽度并显示高度的前150像素。

Answer 1

您只需要计算图像宽高比：

var f = image.height / image.width;
var newHeight = canvas.width * f;

然后使用重新计算的目标高度绘制目标：

ctx.drawImage(image, 0, 0, image.width, image.height, // source size
                     0, 0, canvas.width, newHeight);  // destination size

Canvas会为你做剪辑。

如果您想让目标垂直位置居中，您可以这样做：

var destY = (canvas.height - image.height) / 2;

ctx.drawImage(image, 0, 0, image.width, image.height,    // source size
                     0, destY, canvas.width, newHeight); // destination size

使用HTML5 Canvas防止图像按比例缩放

1 个答案: