如何将图像缩放和居中为方形尺寸？答案

【问题标题】：How to scale and center image to square dimensions?如何将图像缩放和居中为方形尺寸？
【发布时间】：2020-02-05 06:45:40
【问题描述】：

这些问题相似但无济于事：this、this、this 和 this。

目标是将图像绘制到方形画布上，同时保留原始纵横比，如果原始纵横比不是方形，则将图像居中。

例如，使用附加的 1262x2688 图像。下面的代码将其大小调整为 100x100，但它会扭曲纵横比。

代码应： (1) 缩放图像以适合 100x100 画布； (2) 保持纵横比； (3) 使图像在画布内垂直和水平居中。

    // Create canvas element.
    var canvas = $(document.createElement("canvas"));

    // Get canvas context.
    var context = canvas[0].getContext("2d");

    // Set canvas size.
    canvas[0].width = 100;
    canvas[0].height = 100;

    // Write image to canvas.
    context.drawImage(image, 0, 0, newWidth, newHeight);

图片

【问题讨论】：

如果你想保留整个图像而不被截断，这是不可能的。您必须保持纵横比以使图像不失真，但如果可以将图像的一部分切掉，那么它是可能的。
特拉维斯是正确的。您无法在不扭曲图像的情况下更改图像的纵横比。您要么需要确定哪个更大（宽度或高度）并使用最大的一个来填充画布并将其居中，在边框之间留出空间，要么您需要部分剪切图像以使其成为正方形。
@icecub 很抱歉造成混乱。图像应缩放以适应方形画布，同时保持纵横比。所以图像最终不会是方形的，但会保持其纵横比（使用两个比例因子中的最小者），并且需要水平或垂直居中。

标签： javascript image canvas html5-canvas resize

【解决方案1】：

假设我的计算方法正确，以下可能有效？

ratio = image.width/image.height;
if (image.width > image.height) {
    output.height = ( 100 / ratio ) 
    output.width = 100
    output.x = 0
    output.y = (100 - output.height) / 2
} else {
    output.height = 100
    output.width = 100 * ratio
    output.x = (100 - output.width) / 2
    output.y = 0
}

【讨论】：

【解决方案2】：

要使图像适合画布，同时保留方面，请使用以下

const w = image.naturalWidth;
const h = image.naturalHeight;

// Get the min scale to fit the image to the canvas
const scale = Math.min(canvas.width / w, canvas.height / h);

// Set the transform to scale the image, and center to the canvas
ctx.setTransform(scale, 0, 0, scale, canvas.width / 2, canvas.height / 2);

// draw the image offset by half its width and height to center and fit
ctx.drawImage(image, -w / 2, -h / 2, w, h);

// to reset the transform
// ctx.setTransform(1,0,0,1,0,0);

【讨论】：

感谢此代码！我们最终使用了不同的东西，但是您的代码有所帮助。 :)
@Crashalot 如果您使用setTranform(xAxisXScale, xAxisYscale, yAxisXScale, yAxisYScale, canvasXOrigin, canvasYOrigin)，则无需进行额外的计算来转换和缩放图像（就像您在答案中所做的那样）。您可以在图像坐标中渲染到画布
我们最初使用的是您的版本，但是当画布小于图像时它不起作用。如果您更新您的答案，很高兴奖励您积分！再次感谢您的帮助。
@Crashalot 我不关心分数，只是觉得你使用了更复杂的解决方案很奇怪。答案中的代码确实有效，我看不到任何拼写错误，如果它不适用于较小的画布，那么它也不适用于较大的画布

【解决方案3】：

这是我们使用的代码：

    // Create canvas element.
    var canvas = $(document.createElement("canvas"));

    // Get canvas context.
    var context = canvas[0].getContext("2d");

    // Set canvas size.
    canvas[0].width = canvasWidth;
    canvas[0].height = canvasHeight;

    // Set image size, must use image.naturalWidth and image.naturalHeight -- not image.width and image.height.
    const imageWidth = image.naturalWidth;
    const imageHeight = image.naturalHeight;

    // Set scale to fit image to canvas, 
    const scale = Math.min(canvasWidth/imageWidth, canvasHeight/imageHeight);

    // Set new image dimensions.
    const scaledWidth = imageWidth * scale;
    const scaledHeight = imageHeight * scale;

    // Draw image in center of canvas.
    context.drawImage(image, (canvasWidth - scaledWidth)/2, (canvasHeight - scaledHeight)/2, scaledWidth, scaledHeight);

【讨论】：

我只想感谢你拯救了我的理智所剩无几。