如何在不影响待上传文件大小的情况下缩小图片预览体积？（JavaScript）

你遇到的卡顿问题本质是直接加载原图到内存，10张大图同时占用过高内存导致的。要解决这个问题，核心思路是用Canvas对原图进行缩放压缩，生成体积更小的缩略图作为预览，原文件完全保持原样用于后续上传。

实现方案 #

基于你的现有代码，修改后既保留尺寸验证逻辑，又能生成轻量预览图：

function showFiles(file) {
    const previewImage = new Image();
    previewImage.src = URL.createObjectURL(file);

    previewImage.decode().then(() => {
        // 保留原有的尺寸验证逻辑
        const originalWidth = previewImage.naturalWidth;
        const originalHeight = previewImage.naturalHeight;
        // 此处可添加你的尺寸合规性验证逻辑

        // 生成压缩预览图
        const maxPreviewSize = 800; // 预览图最大宽高，可按需调整
        let targetWidth = originalWidth;
        let targetHeight = originalHeight;

        // 计算等比缩放比例，避免预览图过大
        if (originalWidth > maxPreviewSize || originalHeight > maxPreviewSize) {
            const scale = Math.min(maxPreviewSize / originalWidth, maxPreviewSize / originalHeight);
            targetWidth = Math.floor(originalWidth * scale);
            targetHeight = Math.floor(originalHeight * scale);
        }

        // 创建Canvas进行压缩处理
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = targetWidth;
        canvas.height = targetHeight;

        // 将原图缩放到Canvas上
        ctx.drawImage(previewImage, 0, 0, targetWidth, targetHeight);

        // 导出为Blob（比DataURL内存占用更低）
        canvas.toBlob((blob) => {
            const previewUrl = URL.createObjectURL(blob);
            previewImage.src = previewUrl;

            // 将预览图添加到DOM（示例）
            // document.querySelector('.preview-container').appendChild(previewImage);

            // 释放无用URL，避免内存泄漏
            previewImage.onload = () => {
                URL.revokeObjectURL(previewUrl);
                URL.revokeObjectURL(previewImage.src);
            };
        }, 'image/jpeg', 0.8); // 格式可选jpeg/png，质量0-1（值越小体积越小）

    }).catch((encodingError) => {
        console.error('图片加载失败:', encodingError);
        // 此处添加错误提示逻辑
    });
}

关键细节说明 #

• 原文件无改动：全程仅读取file对象生成原图用于验证，上传时直接使用原始file即可
• 内存优化：压缩后的预览图体积仅为原图的几分之一，10个预览图也不会造成内存过载
• 可自定义参数：调整maxPreviewSize控制预览图尺寸，修改toBlob的质量参数平衡清晰度与体积
• 内存泄漏防护：使用URL.revokeObjectURL释放临时生成的URL，避免浏览器内存占用过高

内容的提问来源于stack exchange，提问作者pjk_ok