リサイズ（アスペクト比維持）計算
ある画像の大きさを変化させる場合などアスペクト比を維持したまま大きさを算出したい場合のやり方をご紹介します。
例えば、1920x1080pxを横幅1280の大きさに縮小したいとした場合の縦幅を計算して出したい場合などです。
関数定義
JavaScript
/**
* リサイズ（アスペクト比維持）計算
* @param {number} originWidth 元（オリジナル）の横幅
* @param {number} originHeight 元（オリジナル）の高さ
* @param {number} resizeNumber リサイズする幅
* @param {'width'|'height'} [resizeMove] リサイズする基準となる幅
* @param {number} [otherSideNumber] resizeMoveとは逆の幅をリサイズする幅
* @return {{width:number,height:number}|boolean} リサイズした横幅と高さを返し、失敗したらfalseを返す
*/
var resizeMAR = function(originWidth, originHeight, resizeNumber, resizeMove, otherSideNumber) {
if (!originWidth || !originHeight || !resizeNumber) return false;
if (!resizeMove) resizeMove = 'width';
var result;
if (String(originWidth).match(/^[0-9]+$/) && String(originHeight).match(/^[0-9]+$/) &&
String(resizeNumber).match(/^[0-9]+$/) && resizeMove.match(/^(width|height)$/)) {
var newWidth = 0, newHeight = 0, reResizeMove = '';
if (resizeMove === 'width') {
newHeight = resizeNumber * originHeight / originWidth;
newWidth = newHeight * originWidth / originHeight;
reResizeMove = 'height';
} else {
newWidth = resizeNumber * originWidth / originHeight;
newHeight = newWidth * originHeight / originWidth;
reResizeMove = 'width';
}
if (otherSideNumber && String(otherSideNumber).match(/^([0-9]+|auto)$/) && newHeight > otherSideNumber) {
reResult = resizeMAR(newWidth, newHeight, otherSideNumber, reResizeMove);
if (reResult) result = reResult;
} else {
result = {
width : newWidth,
height : newHeight
};
}
}
return result;
};
使い方
引数
| 引数名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| 第一引数 必須 |
number | 元（オリジナル）の横幅 | |
| 第二引数 必須 |
number | 元（オリジナル）の高さ | |
| 第三引数 必須 |
number | リサイズする幅 | |
| 第四引数 | 'width'|'height' | 'width' | リサイズする基準となる幅 |
| 第五引数 | number | 第四引数とは逆の幅をリサイズする幅 |
サンプルコード
次のサンプルコードは横幅1920px、高さ1080pxを横幅1280pxにリサイズした結果を返します。
JavaScript
var resizes = resizeMAR(1920, 1080, 1280);
if (resizes) {
alert(resizes.width + 'x' + resizes.height + 'px');
}