数学/算法使图像适合屏幕保持纵横比

Question

我需要数学/算法的帮助来拍摄已知大小的图像并适合两个屏幕尺寸之一:

720 x 480或1280 x 1024.

图像尺寸来自XML文件,但是这些尺寸是Web尺寸,我还从XML中选择可能比Web尺寸更高和更低分辨率的图像.

我想要的是使用网页尺寸的宽高比在HD(1280x720)屏幕上显示更高分辨率的图像(如果可用),或者,如果用户在SD屏幕上(720x480),则在该屏幕上显示图像.

如果我知道图像的分辨率在两个维度上都比SD屏幕小(在这种情况下,我所知道的是网络维度和水平维度),那么对此有用,但优先级较低的其他事情将会是这样. (图像文件),将其显示为该屏幕上的实际大小.

希望足够清楚.

谢谢!

Answer 1

通用可以是:

图像数据:(w _i,h _i)并定义r _i = w _i/h _i
屏幕分辨率:(w _s,h _s)并定义r _s = w _s/h _s

缩放图像尺寸:

rs > ri ? (wi * hs/hi, hs) : (ws, hi * ws/wi)

例如:

         20
|------------------|
    10
|---------|

--------------------     ---   ---
|         |        |      | 7   |
|         |        |      |     | 10
|----------        |     ---    |
|                  |            |
--------------------           ---

ws = 20
hs = 10
wi = 10
hi = 7

20/10 > 10/7 ==> (wi * hs/hi, hs) = (10 * 10/7, 10) = (100/7, 10) ~ (14.3, 10)

您可以清楚地看到屏幕尺寸,因为高度是屏幕的高度,但显然保持宽高比 14.3/10 ~ 10/7

UPDATE

将图像居中如下:

调用(w _new,h _new)新维度.

top = (hs - hnew)/2
left = (ws - wnew)/2

Answer 2

我理解接受的答案并且它有效，但我总是发现以下方法更简单，更简洁，以实现“最适合”：

// prep
let maxWidth = 190,
    maxHeight = 150;
let imgWidth = photo.width,
    imgHeight = photo.height;

// calc
let widthRatio = maxWidth / imgWidth,
    heightRatio = maxHeight / imgHeight;
let bestRatio = Math.min(widthRatio, heightRatio);

// output
let newWidth = imgWidth * bestRatio,
    newHeight = imgHeight * bestRatio;

Answer 3

这里是直截了当的C.

您希望按返回的比例因子缩放两个坐标.

/* For a rectangle inside a screen, get the scale factor that permits the rectangle
   to be scaled without stretching or squashing. */
float 
aspect_correct_scale_for_rect(const float screen[2], const float rect[2])
{
    float screenAspect = screen[0] / screen[1];
    float rectAspect = rect[0] / rect[1];

    float scaleFactor;
    if (screenAspect > rectAspect)
        scaleFactor = screen[1] / rect[1];
    else
        scaleFactor = screen[0] / rect[0];

    return scaleFactor;
}

Answer 4

使用信箱或适合屏幕进行宽高比校正

我最近写了一个方法来处理 iOS 中的这个确切问题。我使用 Eigen 矩阵库进行缩放，但原理（缩放因子）在没有矩阵的情况下是相同的。

Eigen::Matrix4x4f aspectRatioCorrection(bool fillScreen, const Eigen::Vector2f &screenSize, const Eigen::Vector2f &imageSize)
{
    Eigen::Matrix4x4f scalingMatrix(Eigen::Matrix4x4f::Identity());

    float screenWidth = screenSize.x();
    float screenHeight = screenSize.y();
    float screenAspectRatio = screenWidth / screenHeight;
    float imageWidth = imageSize.x();
    float imageHeight = imageSize.y();
    float imageAspectRatio = imageWidth / imageHeight;

    float scalingFactor;
    if (fillScreen) {
        if (screenAspectRatio > imageAspectRatio) {
            scalingFactor = screenWidth / imageWidth;
        } else {
            scalingFactor = screenHeight / imageHeight;
        }
    } else {
        if (screenAspectRatio > imageAspectRatio) {
            scalingFactor =  screenHeight / imageHeight;
        } else {
            scalingFactor = screenWidth / imageWidth;
        }
    }

    scalingMatrix(0, 0) = scalingFactor;
    scalingMatrix(1, 1) = scalingFactor;

    return scalingMatrix;
}