基于JavaScript实现在线图片压缩工具
这篇只讲本项目“图片压缩”工具的功能层 JavaScript 实现。整体链路是：
选择图片 -> 读取原图信息 -> 提交压缩参数 -> 获取压缩结果 -> 更新预览与统计 -> 下载
在线工具网址：https://see-tool.com/image-compressor
工具截图：
1. 前端状态模型：围绕“多图批处理”设计
工具初始化后维护一个轻量状态对象，核心是 images 数组和当前预览索引。
const state = {
images: [],
currentIndex: 0,
recompressTimer: null,
};
每张图片在内存里都是一个独立对象，既保存原图信息，也保存压缩结果信息：
- 原图：
originalUrl、originalSize、originalWidth、originalHeight、originalType - 压缩图：
compressedUrl、compressedSize、compressedWidth、compressedHeight、compressedMimeType - 控制字段：
compressController、compressVersion
这种结构的好处是，单图更新不会影响其他图片，批量场景下逻辑更稳定。
2. 文件接入：先过滤，再补齐元信息
拖拽和文件选择最终都走同一入口 processFiles，先过滤非图片文件，再逐个处理。
const processFiles = async (files) => {
const imageFiles = files.filter(
(file) => file.type && file.type.startsWith("image/"),
);
if (imageFiles.length === 0) return;
for (const file of imageFiles) {
await addImageFile(file);
}
};
addImageFile 会为文件创建对象 URL，并用 Image 对象读取像素尺寸，形成完整的图片对象后立即触发一次压缩。
const addImageFile = async (file) => {
const url = URL.createObjectURL(file);
const img = await loadImage(url);
const imageObj = {
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，并且没有勾选移除元数据时，直接复用原图，不发请求。
const shouldUseOriginal = (imageObj) => {
const format = elements.outputFormat.value;
const quality = Number(elements.qualitySlider.value);
if (format !== "original") return false;
if (quality < 100) return false;
if (elements.removeMetadata && elements.removeMetadata.checked) return false;
return true;
};
这个分支能保证结果与用户设置一致：既然参数不要求二次编码，就直接返回原始文件。
4. 压缩主流程：可取消请求 + 版本号防乱序
compressImage 是核心函数，负责把当前图片和参数提交到接口并回写结果。
const formData = new FormData();
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)));
const controller = new AbortController();
const compressVersion = Number(imageObj.compressVersion || 0) + 1;
imageObj.compressVersion = compressVersion;
imageObj.compressController = controller;
const response = await fetch("/api/image-compress", {
method: "POST",
body: formData,
signal: controller.signal,
});
结果返回后不会立刻写入，而是先校验两件事：
- 这张图还在列表里（没被删除）
- 当前响应版本号仍是最新
只有通过校验才更新 compressedUrl、compressedSize、compressedWidth、compressedHeight。
这能避免“用户连续拖动质量滑块”时旧请求覆盖新结果。
5. 重压缩触发：延迟调度统一入口
质量滑块、输出格式、元数据开关变化后，都不会直接逐张同步请求，而是进入 scheduleRecompress。
const scheduleRecompress = (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;
}
返回体是压缩后的二进制数据，同时附带输出信息头：
X-Output-ExtX-Output-WidthX-Output-HeightX-Output-Size
前端据此展示压缩图信息，不需要再额外解析文件。
7. 结果展示与资源回收
统计区通过聚合 originalSize 与 compressedSize 计算总原始体积、总压缩体积、节省体积和压缩率。预览区按 currentIndex 展示当前图的原图/压缩图与像素信息。
批量下载按顺序触发，清空或删除图片时会执行两步清理：
- 中断进行中的压缩请求（
AbortController） - 释放对象 URL（
URL.revokeObjectURL）
这样整条链路能长期稳定运行：上传、重压缩、预览切换、删除、清空都在同一套状态模型里闭环。
以上就是基于JavaScript实现在线图片压缩工具的详细内容，更多关于JS在线图片压缩工具的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了JavaScript函数的调用模式，包括方法调用模式，构造器调用模式，apply/call调用模式，感兴趣的小伙伴们可以参考一下2016-08-08
javascript 判断是否是ie，是否是特定版本 ，方法比较多，正则代码比较段2008-07-07
这篇文章主要给大家总结介绍了关于javascript中的一些奇葩的日期换算方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
在使用uni-app完成扫码功能时,有时需要聚焦文本框的同时,需要软键盘消失,下面这篇文章主要给大家介绍了关于uniapp中input聚焦禁止软键盘弹出的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
html2canvas是一个前端JavaScript库,能够将Web页面中的DOM元素渲染为高保真的图片,适用于生成页面截图或实现打印预览功能,这篇文章主要介绍了前端html2canvas使用场景的相关资料,需要的朋友可以参考下2025-11-11
在我们开发网页的时候偶尔会有需要用户录音的情况,下面这篇文章主要给大家介绍了关于JS如何获取浏览器声音、麦克风以及通知权限的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了swiper实现异形轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了JavaScript树结构深度优先算法，树结构可以说是前端中最常见的数据结构之一，比如说DOM树、级联选择、树形组件，更多相关内容需要的小伙伴可以参考一下2022-07-07
cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript,这篇文章主要给大家介绍了关于JavaScript中Cookie的简介和使用方法,需要的朋友可以参考下2025-05-05
这篇文章主要介绍了小程序从手动埋点到自动埋点的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论