math/algorithme d'Ajustement de l'image à l'écran de conserver le ratio d'aspect

J'ai besoin d'aide en maths /algorithme de prendre une image de taille connue et ajustement à l'une des deux dimensions de l'écran:

720 x 480 1280 x 1024.

Les dimensions de l'image sont à venir à partir d'un fichier XML, mais ces dimensions sont les dimensions web, j'ai aussi une sélection des images à partir du XML qui peut être plus élevé ou plus faible résolution que le web dimensions.

Ce que je veux, c'est d'utiliser le ratio d'aspect de la web dimensions pour afficher l'image haute résolution, si elle est disponible, sur un HD (1280x720) de l'écran, ou, si l'utilisateur est sur un écran SD (720 x 480) affichage de l'image sur l'écran.

D'autres choses qu'il serait utile pour cela, mais de moindre priorité, serait, si je sais que la résolution de l'image est plus petite dans les deux dimensions qu'une carte SD de l'écran (dans ce cas, tout ce que je sais, c'est le web dimension, et la dimension horizontale de l'image d'un fichier), pour l'afficher en taille réelle sur l'écran.

Espère que c'est assez clair.

Merci!

Pourriez-vous publier des données de l'échantillon et que voudriez-vous le résultat?
Ok, eh bien, en voici quelques-réel des données de l'échantillon: web dimension= width="340" height="517" où il y a une image que la dimension x est en fait 1280. Je veux redimensionner ce donc que c'est la hauteur n'est pas supérieur à 720, et redimensionner la largeur en proportion, de sorte que l'image ne sont pas déformés, afin que je puisse l'afficher sur un écran HD, ou si l'utilisateur est sur un écran SD, ce serait la dimension que je voudrais mettre à l'échelle. La sortie serait targetrect={x,y,xx,yy)

InformationsquelleAutor alphablender | 2011-07-03

132

Générique comme:

Les données de l'Image: (w_i h_i) et de définir r_i = w_i /h_i

La résolution de l'écran: (w_s h_s) et de définir r_s = w_s /h_s

L'échelle de l'image dimensions:
```
rs > ri ? (wi * hs/hi, hs) : (ws, hi * ws/wi)
```
Ainsi, par exemple:
```
         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)
```
Comme vous pouvez le voir clairement les échelles de la taille de l'écran, car la hauteur est celle de l'écran, mais clairement garde ratio d'aspect depuis 14.3/10 ~ 10/7

Mise à JOUR

Centre de l'image comme suit:

appel (w_nouveau h_nouveau), les nouvelles dimensions.
```
top = (hs - hnew)/2
left = (ws - wnew)/2
```
- Je ne suis pas totalement familier avec la notation que vous utilisez, le indicée je me réfère à un membre d'un groupe, comme x[i] où x est un tableau de taille, j'ai donc fait référence à une image et w[i] signifie que nous sommes sur un tableau d'images? Désolé si ça fait de moi l'air comme un idiot.
- non, pas de tableau, le i était censé signifier image, et s écran.
- ok, cool, merci!
- Ne ce look un peu comme ce que vous décrivez?: imagewidth=x imageheight=y imageratio= imagewidth / imageheight screenwidth=1280 screenheight=720 screenratio=screenwidth / screenheight si screenratio > imageratio puis resultwidth=imagewidth * screenheight / imageheight resultheight=screenheight d'autre resultwidth=screenwidth resultheight=imageheight * screenwidth / imagewidth fin si
- regarde, à droite, à moi.
- Quelle serait la manière de calculer le centrage de l'image à une taille d'écran donnée une fois que j'ai calculé la dimension?
- voir mise à jour
- Ce qui est excellent, et très clair. Je pense qu'il serait plus clair d'utiliser 9 place de l'un des 10s, mais j'aime bien les dessins ascii.
- Que l'expression explique tout. Propre et utile!
- Merci! J'ai de la purée jusqu'à ce code ici dans Swift: stackoverflow.com/a/30519019/8047... mais j'ai trouvé que par l'inversion de la >, j'ai été capable de me "remplir" au lieu de "boîte aux lettres." Est-ce un artefact de vraiment mauvais essais, ou est-ce correct?
- cela ne fonctionne pas pour un "plein écran" de l'image.
- cette implémenté en javascript gist.github.com/thecotne/d7630dec23ebb1aad24a5d5d0e355a4c
InformationsquelleAutor davin

Ici, il est en simple C.

Vous souhaitez mettre à l'échelle les deux coordonnées par le retour de facteur d'échelle.

/* Pour obtenir un rectangle à l'intérieur d'un écran, d'obtenir le facteur d'échelle que permet le rectangle 
pour être redimensionnés sans étirement ou les écraser. */
flotteur 
aspect_correct_scale_for_rect(const float écran[2], const float rect[2]) 
{ 
flotteur screenAspect = écran[0] de l'écran[1]; 
flotteur rectAspect = rect[0] /rect[1]; 

flotteur scaleFactor; 
si (screenAspect > rectAspect) 
scaleFactor = écran[1] /rect[1]; 
d'autre 
scaleFactor = écran[0] /rect[0]; 

retour scaleFactor; 
}

Facile à comprendre et très utile. Merci!

InformationsquelleAutor Michael Labbé

Ratio d'Aspect de correction avec des bandes noires ou adapter à l'écran

J'ai écrit une méthode récemment pour traiter de ce problème exact dans iOS. Je suis en utilisant les modes Propres de la matrice de la bibliothèque pour faire de mise à l'échelle, mais le principe (facteur d'échelle) est la même sans les 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;
}

N'est-elle pas belle?
oui, en effet. -_-

InformationsquelleAutor Cameron Lowell Palmer

Je comprends la accepté de répondre et il fonctionne, mais j'ai toujours trouvé la méthode suivante pour être plus simple et succincte pour le "meilleur ajustement":

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

InformationsquelleAutor pstanton

Vous devez vous connecter pour publier un commentaire.