js如何改变图片大小

在JavaScript中，改变图片大小通常涉及到两个步骤：加载图片并调整其尺寸，然后将调整后的图片绘制到一个新的<canvas>元素上。以下是一个详细的步骤和示例代码：

基础概念

Image对象：用于加载图片。
Canvas API：用于绘制和操作图像。
drawImage方法：CanvasRenderingContext2D对象的方法，用于在画布上绘制图像。

优势

灵活性：可以在客户端动态调整图片大小，无需服务器端处理。
性能：减少传输大图片所需的网络带宽。
即时性：用户可以立即看到调整后的图片。

类型

缩放：放大或缩小图片。
裁剪：从图片中截取特定区域。

应用场景

网页优化：加载更快的小尺寸图片。
用户上传图片：在上传前调整图片大小。
动态生成缩略图：在社交媒体或博客中。

示例代码

以下是一个简单的示例，展示如何使用JavaScript改变图片大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resize Image</title>
</head>
<body>
    <input type="file" id="imageUpload" accept="image/*">
    <canvas id="resizedCanvas" style="display: none;"></canvas>
    <img id="resizedImage" alt="Resized Image">

    <script>
        document.getElementById('imageUpload').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 canvas = document.getElementById('resizedCanvas');
                        const ctx = canvas.getContext('2d');
                        const maxWidth = 300; // 设置最大宽度
                        const maxHeight = 300; // 设置最大高度
                        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;
                            }
                        }

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);

                        const resizedImage = document.getElementById('resizedImage');
                        resizedImage.src = canvas.toDataURL('image/jpeg');
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>