当前位置：首页 > news >正文

在线图片压缩工具核心JS实现

news 2026/3/26 17:43:31

这篇只讲本项目“图片压缩”工具的功能层 JavaScript 实现。整体链路是：

选择图片 -> 读取原图信息 -> 提交压缩参数 -> 获取压缩结果 -> 更新预览与统计 -> 下载

在线工具网址：https://see-tool.com/image-compressor
工具截图：

1. 前端状态模型：围绕“多图批处理”设计

工具初始化后维护一个轻量状态对象，核心是images数组和当前预览索引。

conststate={images:[],currentIndex:0,recompressTimer:null,};

每张图片在内存里都是一个独立对象，既保存原图信息，也保存压缩结果信息：

原图：originalUrl、originalSize、originalWidth、originalHeight、originalType
压缩图：compressedUrl、compressedSize、compressedWidth、compressedHeight、compressedMimeType
控制字段：compressController、compressVersion

这种结构的好处是，单图更新不会影响其他图片，批量场景下逻辑更稳定。

2. 文件接入：先过滤，再补齐元信息

拖拽和文件选择最终都走同一入口processFiles，先过滤非图片文件，再逐个处理。

constprocessFiles=async(files)=>{constimageFiles=files.filter((file)=>file.type&&file.type.startsWith("image/"),);if(imageFiles.length===0)return;for(constfileofimageFiles){awaitaddImageFile(file);}};

addImageFile会为文件创建对象 URL，并用Image对象读取像素尺寸，形成完整的图片对象后立即触发一次压缩。

constaddImageFile=async(file)=>{consturl=URL.createObjectURL(file);constimg=awaitloadImage(url);constimageObj={id:`${Date.now()}-${Math.random()}`,name:file.name,file,originalUrl:url,originalIsObjectUrl:true,originalSize:file.size,originalType:file.type||"image/jpeg",originalWidth:img.width,originalHeight:img.height,compressedUrl:null,compressedSize:null,compressController:null,compressVersion:0,};state.images.push(imageObj);state.currentIndex=state.images.length-1;compressImage(imageObj);};

3. 参数解析：输出格式和“直出原图”判定

压缩前先计算输出格式配置。工具支持original/jpeg/png/webp/avif，并统一映射成mimeType + extension。

同时有一个关键分支：当用户选择original且质量 100，并且没有勾选移除元数据时，直接复用原图，不发请求。

constshouldUseOriginal=(imageObj)=>{constformat=elements.outputFormat.value;constquality=Number(elements.qualitySlider.value);if(format!=="original")returnfalse;if(quality<100)returnfalse;if(elements.removeMetadata&&elements.removeMetadata.checked)returnfalse;returntrue;};

这个分支能保证结果与用户设置一致：既然参数不要求二次编码，就直接返回原始文件。

4. 压缩主流程：可取消请求 + 版本号防乱序

compressImage是核心函数，负责把当前图片和参数提交到接口并回写结果。

constformData=newFormData();formData.append("image",imageObj.file,imageObj.name);formData.append("format",elements.outputFormat.value);formData.append("quality",String(Number(elements.qualitySlider.value)));formData.append("removeMetadata",String(Boolean(elements.removeMetadata?.checked)),);formData.append("progressive",String(Boolean(elements.progressive?.checked)));constcontroller=newAbortController();constcompressVersion=Number(imageObj.compressVersion||0)+1;imageObj.compressVersion=compressVersion;imageObj.compressController=controller;constresponse=awaitfetch("/api/image-compress",{method:"POST",body:formData,signal:controller.signal,});

结果返回后不会立刻写入，而是先校验两件事：

这张图还在列表里（没被删除）
当前响应版本号仍是最新

只有通过校验才更新compressedUrl、compressedSize、compressedWidth、compressedHeight。

这能避免“用户连续拖动质量滑块”时旧请求覆盖新结果。

5. 重压缩触发：延迟调度统一入口

质量滑块、输出格式、元数据开关变化后，都不会直接逐张同步请求，而是进入scheduleRecompress。

constscheduleRecompress=(delay=120)=>{if(state.recompressTimer){clearTimeout(state.recompressTimer);state.recompressTimer=null;}state.recompressTimer=setTimeout(()=>{state.recompressTimer=null;updateCompressedImages();},delay);};

updateCompressedImages内部遍历state.images，逐张调用compressImage，让参数变化后的行为保持一致。

6. 服务端压缩：字段校验 + Sharp 编码

接口只接收POST multipart/form-data。先做参数清洗：

文件体积上限（30MB）
目标格式白名单
质量范围（1~100）
布尔参数标准化（true/false/1/0/yes/no）

随后读取输入元信息，解析目标格式，再按格式进入不同编码分支：

switch(targetFormat){case"jpeg":transformer=transformer.jpeg({quality,mozjpeg:true,progressive});break;case"png":transformer=transformer.png({quality,compressionLevel:9,progressive,});break;case"webp":transformer=transformer.webp({quality,effort:6});break;case"avif":transformer=transformer.avif({quality,effort:6});break;}