前端用canvas实现图片的等比例缩放

鹤鸣的日常

已于 2024-09-26 09:27:33 修改

阅读量295

点赞数 1

文章标签：前端 javascript vue.js html5 canvas

于 2024-09-25 19:30:02 首次发布

本文链接：https://blog.csdn.net/XL984507092/article/details/142531103

版权

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Image Resize</title>
</head>

<body>
    <input type="file" id="imageInput" accept="image/*">
    <div>
        <canvas id="canvasOriginal" style="border:1px solid #000;"></canvas>
        <canvas id="canvasResized" style="border:1px solid #000;"></canvas>
    </div>
    <script src="script.js"></script>
</body>

</html>

JavaScript代码


document.getElementById('imageInput').addEventListener('change', function (event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
            const img = new Image();
            img.onload = function () {
                const originalCanvas = document.getElementById('canvasOriginal');
                const resizedCanvas = document.getElementById('canvasResized');
                const ctxOriginal = originalCanvas.getContext('2d');
                const ctxResized = resizedCanvas.getContext('2d');
                const originalWidth = img.width;
                const originalHeight = img.height;
                let width, height, scale;

                // 设置原始图片canvas尺寸
                originalCanvas.width = originalWidth;
                originalCanvas.height = originalHeight;
                // 绘制原始图片
                ctxOriginal.drawImage(img, 0, 0, originalWidth, originalHeight);

                // 计算缩放比例
                if (Math.max(originalWidth, originalHeight) > 1080) {
                    scale = 1080 / Math.max(originalWidth, originalHeight);
                } else {
                    scale = 1;
                }

                // 计算缩放后的尺寸
                width = originalWidth * scale;
                height = originalHeight * scale;

                // 设置缩放后的图片canvas尺寸
                resizedCanvas.width = width;
                resizedCanvas.height = height;
                // 绘制缩放后的图片
                ctxResized.drawImage(img, 0, 0, width, height);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

代码解释

1.加载图片：使用 FileReader 读取用户选择的图片文件。

const reader = new FileReader();
reader.onload = function (e) {
    const img = new Image();
    img.onload = function () {
    
        // 处理代码逻辑        

    };
    img.src = e.target.result;
};
reader.readAsDataURL(file);

2.获取图片原始尺寸：获取图片的原始宽度和高度。

const originalWidth = img.width;
const originalHeight = img.height;

3.计算缩放比例：根据目标容器的尺寸和图片的原始尺寸计算缩放比例。

let width, height, scale;

if (Math.max(originalWidth, originalHeight) > 1080) {
    scale = 1080 / Math.max(originalWidth, originalHeight);
} else {
    scale = 1;
}

width = originalWidth * scale;
height = originalHeight * scale;

4.计算新的尺寸：根据缩放比例计算新的宽度和高度。

const resizedWidth = originalWidth * scale;
const resizedHeight = originalHeight * scale;

5. 绘制图片：使用drawImage方法绘制图片到canvas上。

// 使用canvas绘制原始图片。
originalCanvas.width = originalWidth;
originalCanvas.height = originalHeight;
ctxOriginal.drawImage(img, 0, 0, originalWidth, originalHeight);

// 使用canvas绘制缩放后的图片。

resizedCanvas.width = width;
resizedCanvas.height = height;
ctxResized.drawImage(img, 0, 0, width, height);