图片缩放js

图片缩放在Web开发中是一个常见的需求，可以通过JavaScript来实现。以下是关于图片缩放的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方法。

基础概念

图片缩放是指改变图片的尺寸，使其适应不同的显示需求。这可以通过调整图片的宽度和高度来实现。

优势

优化加载速度：缩小图片尺寸可以减少文件大小，从而加快页面加载速度。
适应不同设备：根据设备的屏幕大小和分辨率调整图片尺寸，提供更好的用户体验。
节省存储空间：较小的图片文件占用更少的存储空间。

类型

等比例缩放：保持图片的宽高比不变，避免图片变形。
非等比例缩放：可以自由调整图片的宽度和高度，但可能会导致图片变形。

应用场景

响应式设计：在不同设备和屏幕尺寸上显示合适的图片。
图片预览：在上传图片时提供缩略图预览。
动态加载：根据需要动态调整图片大小以优化性能。

示例代码

以下是一个使用JavaScript实现图片等比例缩放的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Resize</title>
</head>
<body>
    <input type="file" id="imageUpload" accept="image/*">
    <img id="previewImage" alt="Preview">

    <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.src = e.target.result;
                    img.onload = function() {
                        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;
                            }
                        }

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

                        document.getElementById('previewImage').src = canvas.toDataURL('image/jpeg');
                    };
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>