js上传照片压缩

在JavaScript中实现照片上传前的压缩，主要涉及到图像处理和文件大小优化。以下是相关的基础概念、优势、类型、应用场景以及解决方案。

基础概念

图像压缩是指通过减少图像数据中的冗余信息，以减小文件大小的过程。在Web开发中，通常在前端进行图像压缩可以减少上传时间，减轻服务器负担，并优化用户体验。

优势

减少上传时间：压缩后的图像文件更小，上传更快。
节省存储空间：服务器上存储的图像文件更小，节省存储空间。
提升用户体验：更快的上传速度和更流畅的交互。

类型

无损压缩：不丢失图像信息，压缩比相对较低。
有损压缩：通过牺牲一定的图像质量来换取更高的压缩比。

应用场景

用户头像上传
社交媒体图片分享
电商产品图片上传

解决方案

可以使用HTML5的FileReader和Canvas API来实现前端图像压缩。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Compression</title>
</head>
<body>
    <input type="file" id="fileInput" accept="image/*">
    <canvas id="canvas" style="display:none;"></canvas>
    <img id="compressedImage" alt="Compressed Image">
    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    const canvas = document.getElementById('canvas');
                    const ctx = canvas.getContext('2d');

                    // 设置压缩后的尺寸
                    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;
                        }
                    }

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

                    // 压缩质量
                    const quality = 0.7;
                    const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);

                    // 显示压缩后的图像
                    document.getElementById('compressedImage').src = compressedDataUrl;

                    // 可以将compressedDataUrl转换为Blob进行上传
                    const byteString = atob(compressedDataUrl.split(',')[1]);
                    const mimeString = compressedDataUrl.split(',')[0].split(':')[1].split(';')[0];
                    const arrayBuffer = new ArrayBuffer(byteString.length);
                    const intArray = new Uint8Array(arrayBuffer);
                    for (let i = 0; i < byteString.length; i++) {
                        intArray[i] = byteString.charCodeAt(i);
                    }
                    const blob = new Blob([arrayBuffer], { type: mimeString });

                    // 上传blob到服务器
                    // const formData = new FormData();
                    // formData.append('file', blob, 'compressed.jpg');
                    // fetch('/upload', { method: 'POST', body: formData });
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>