窗口可视区域加载图像

最近在做图像的二维成像，记录下可视区域内如何加载任意尺寸的图像.

首先明确的是在任何时候图像本身宽高比例不变

// 设定变量
const { width, height } = viewPortDom.getBoundingClientRect();
const naturalWidth = imgDom.naturalWidth;
const naturalHeight = imgDom.naturalHeight;

场景一：使图像的宽或高铺满可视区域的一个方向；

// 计算视口宽与图像宽比值
const widthScale = width / naturalWidth;
// 计算视口高与图像高比值
const heightScale = height / naturalHeight;

// 取scale较小的边铺满可视区域的一个方向，再计算纠正另外一个边（按图像原始宽高等比例缩放）
let imgWidth = width;
let imgHeight = height;
if ( heightScale < widthScale) {
    imgWidth = imgHeight * (naturalWidth / naturalHeight);
} else {
    imgHeight = imgWidth * (naturalHeight / naturalWidth);
}

场景二：使图像的宽高自适应可视区域，且垂直、水平居中；

// 获取可视区域较小的边，初始化图像大小
const minSize = Math.min(width, height);
let imgWidth = minSize;
let imgHeight = minSize;

// 根据图像原始的宽高大小，纠正较小的边（按图像原始宽高等比例缩放）
if (naturalHeight > naturalWidth) {
    imgWidth = imgHeight * (naturalWidth / naturalHeight);
} else {
    imgHeight = imgWidth * (naturalHeight / naturalWidth);
}

// 计算偏移量，定位图像相对可视区域居中
const left = (width - imgWidth) / 2;
const top = (height - imgHeight) / 2;