js多图片压缩上传

在Web开发中，经常需要处理用户上传的图片，为了提高上传速度和节省服务器存储空间，通常会对图片进行压缩处理后再上传。以下是关于JavaScript多图片压缩上传的基础概念、优势、类型、应用场景以及解决方案：

基础概念

图片压缩是指通过减少图片文件的大小来降低存储需求和传输时间，同时尽量保持图片质量。JavaScript可以在客户端进行图片压缩，减少服务器负担。

优势

减少带宽消耗：压缩后的图片文件更小，上传和下载速度更快。
节省服务器存储空间：较小的文件占用的存储资源更少。
提升用户体验：更快的上传速度可以提升用户的满意度。

类型

有损压缩：通过牺牲一定的图片质量来减小文件大小，如JPEG格式。
无损压缩：在不损失图片质量的前提下减小文件大小，如PNG格式。

应用场景

社交媒体平台
电子商务网站
在线教育平台
企业内部管理系统

解决方案

以下是一个使用JavaScript进行多图片压缩上传的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi Image Compression Upload</title>
</head>
<body>
    <input type="file" id="fileInput" multiple accept="image/*">
    <button onclick="uploadImages()">Upload Images</button>
    <script>
        async function compressImage(file) {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            return new Promise((resolve, reject) => {
                reader.onload = event => {
                    const img = new Image();
                    img.src = event.target.result;
                    img.onload = () => {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        const maxWidth = 800; // 设置最大宽度
                        const scaleSize = maxWidth / img.width;
                        canvas.width = maxWidth;
                        canvas.height = img.height * scaleSize;
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); // 压缩质量设置为0.7
                        resolve(compressedDataUrl);
                    };
                    img.onerror = reject;
                };
                reader.onerror = reject;
            });
        }

        async function uploadImages() {
            const fileInput = document.getElementById('fileInput');
            const files = fileInput.files;
            const compressedImages = [];

            for (const file of files) {
                const compressedDataUrl = await compressImage(file);
                const byteString = atob(compressedDataUrl.split(',')[1]);
                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: 'image/jpeg' });
                compressedImages.push(blob);
            }

            // 这里可以进行上传操作，例如使用FormData上传到服务器
            const formData = new FormData();
            compressedImages.forEach((img, index) => {
                formData.append('images', img, `image${index}.jpg`);
            });

            fetch('/upload', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
              .then(data => console.log(data))
              .catch(error => console.error(error));
        }
    </script>
</body>
</html>