js修改上传图片大小

在JavaScript中修改上传图片的大小通常涉及到以下几个步骤：

基础概念

FileReader API：用于读取文件内容，如图像文件。
Canvas API：用于在网页上绘制图形，并可以对图像进行缩放、裁剪等操作。
Blob对象：表示不可变的原始数据，可以用来存储二进制数据。

优势

客户端处理：减轻服务器负担，提高用户体验。
即时反馈：用户可以在上传前看到图片调整后的效果。
灵活性：可以根据需要动态调整图片大小和质量。

类型

缩放：改变图片的宽度和高度。
裁剪：去除图片的部分区域。
旋转：改变图片的方向。

应用场景

社交媒体：用户上传头像时调整大小。
电子商务：商品图片展示时需要统一尺寸。
博客平台：用户上传文章配图时调整大小。

示例代码

以下是一个简单的示例，展示如何使用JavaScript和Canvas API来调整上传图片的大小：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resize Image</title>
</head>
<body>
<input type="file" id="imageUpload" accept="image/*">
<br>
<img id="preview" alt="Image 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.onload = function() {
                const maxWidth = 800;
                const maxHeight = 600;
                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);

                const resizedImage = canvas.toBlob(function(blob) {
                    const resizedUrl = URL.createObjectURL(blob);
                    document.getElementById('preview').src = resizedUrl;
                }, 'image/jpeg', 0.8); // 质量设置为0.8
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});
</script>
</body>
</html>