js图片等比例缩放计算

在JavaScript中，图片等比例缩放是一种常见的需求，尤其是在网页设计和用户界面开发中。等比例缩放意味着在调整图片大小时，保持其原始的宽高比不变，以避免图片变形。

基础概念

等比例缩放的核心在于计算新的宽度和高度，使得新的尺寸与原始尺寸的比例保持一致。这通常涉及到以下几个步骤：

确定原始图片的宽度和高度。
根据目标容器的尺寸或期望的最大尺寸计算新的宽度和高度。
使用新的尺寸来调整图片大小。

类型与应用场景

固定尺寸缩放：适用于需要图片在特定区域内显示的情况。
最大尺寸限制：适用于需要限制图片最大宽度和高度的场景，如社交媒体帖子。
响应式设计：适用于网页设计，使图片能够根据浏览器窗口大小自动调整。

示例代码

以下是一个简单的JavaScript函数，用于实现图片的等比例缩放：

function resizeImage(file, maxWidth, maxHeight) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);
        img.onload = () => {
            let width = img.width;
            let height = img.height;

            if (width > height) {
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
            } else {
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
            }

            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            canvas.toBlob((blob) => {
                resolve(blob);
            }, file.type);
        };
        img.onerror = reject;
    });
}