algorithm - samsung - matemática/algoritmo Ajustar la imagen a la pantalla conservar la relación de aspecto

como quitar el zoom de la tv

Question

Necesito ayuda con matemáticas / algoritmo para tomar una imagen de tamaño conocido y ajustar a una de las dos dimensiones de pantalla:

720 x 480 o 1280 x 1024.

Las dimensiones de la imagen provienen de un archivo XML, sin embargo, esas dimensiones son las dimensiones web, también recibo una selección de imágenes del XML que pueden ser de mayor o menor resolución que las dimensiones web.

Lo que quiero es usar la relación de aspecto de las dimensiones web para mostrar la imagen de mayor resolución, si está disponible, en una pantalla HD (1280x720) o, si el usuario está en una pantalla SD (720x480), mostrar la imagen en esa pantalla .

Otras cosas que serían útiles para esto, pero de menor prioridad, serían, si sé que la resolución de la imagen es más pequeña en ambas dimensiones que una pantalla SD (en este caso, todo lo que sé es la dimensión web y la dimensión horizontal) del archivo de imagen), para mostrarlo como el tamaño real en esa pantalla.

Espero que sea lo suficientemente claro.

¡Gracias!

Answer 1

Corrección de la relación de aspecto con letterboxing o ajuste a la pantalla

Escribí un método recientemente para manejar este problema exacto en iOS. Estoy usando la biblioteca de matriz Eigen para escalar, pero el principio (factor de escala) es el mismo sin matrices.

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;
}

Answer 2

Aquí está en directo C.

Desea escalar ambas coordenadas por el factor de escala devuelto.

/* 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 3

Entiendo la respuesta aceptada y funciona, pero siempre he encontrado que el siguiente método es más simple y sucinto para "mejor ajuste":

// 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 4

Genérico como puede ser:

Datos de imagen: (w _i , h _i ) y define r _i = w _i / h _i
Resolución de pantalla: (w _s , h _s ) y define r _s = w _s / h _s

Dimensiones de la imagen escalada:

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

Así por ejemplo:

         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)

Lo cual, como puede ver, se ajusta claramente al tamaño de la pantalla, porque la altura es la de la pantalla pero mantiene claramente la relación de aspecto desde 14.3/10 ~ 10/7

ACTUALIZAR

Centre la imagen de la siguiente manera:

llamar (w _nuevo , h _nuevo ) las nuevas dimensiones.

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