基于JavaScript实现在线图片压缩工具

更新时间：2026年03月17日 08:35:15 作者：滕青山

本文详细介绍了基于JavaScript实现的在线图片压缩工具的功能层设计,包括前端状态模型、文件接入、参数解析、压缩主流程、重压缩触发、服务端压缩、结果展示与资源回收等关键部分,需要的朋友可以参考下

1. 前端状态模型：围绕“多图批处理”设计
2. 文件接入：先过滤，再补齐元信息
3. 参数解析：输出格式和“直出原图”判定
4. 压缩主流程：可取消请求 + 版本号防乱序
5. 重压缩触发：延迟调度统一入口
6. 服务端压缩：字段校验 + Sharp 编码
7. 结果展示与资源回收

这篇只讲本项目“图片压缩”工具的功能层 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-Ext
X-Output-Width
X-Output-Height
X-Output-Size

前端据此展示压缩图信息，不需要再额外解析文件。

7. 结果展示与资源回收

统计区通过聚合 originalSize 与 compressedSize 计算总原始体积、总压缩体积、节省体积和压缩率。预览区按 currentIndex 展示当前图的原图/压缩图与像素信息。

批量下载按顺序触发，清空或删除图片时会执行两步清理：

中断进行中的压缩请求（AbortController）
释放对象 URL（URL.revokeObjectURL）

这样整条链路能长期稳定运行：上传、重压缩、预览切换、删除、清空都在同一套状态模型里闭环。

以上就是基于JavaScript实现在线图片压缩工具的详细内容，更多关于JS在线图片压缩工具的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

javascript addBookmark 加入收藏多浏览器兼容
不错的加入收藏代码，加入了对一些常见浏览器的判断，更好的体现用户体验，兼容了ie,firefox.
2009-08-08
前端生成word文件的两种方式总结
这篇文章主要介绍了前端生成word文件的两种方式,两种方法分别是html-docx-js和pizzip+docxtemplater,html-docx-js简单易用,但支持的HTML和CSS有限,且不支持图片,pizzip+docxtemplater需要预先设置Word文件样式,但支持更复杂的样式和图片插入,需要的朋友可以参考下
2025-03-03
echarts同一页面中四个图表切换的js数据交互方法示例
这篇文章主要给大家介绍了关于echarts同一页面中四个图表切换的js数据交互的相关资料，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的帮助，需要的朋友们下面随着小编来一起学习学习吧
2018-07-07
JavaScript获取字符串实际长度(包含中英文)
这篇文章介绍了JavaScript获取字符串实际长度(包含中英文)的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
Javascript delete 引用类型对象
很少使用javascript的delete，最近因为一个小bug发现删除引用类型对象的时候有一点不同
2013-11-11
js简单遍历获取对象中的属性值的方法示例
这篇文章主要介绍了js简单遍历获取对象中的属性值的方法,涉及javascript使用for循环遍历json对象属性值的简单操作技巧,需要的朋友可以参考下
2019-06-06
原来JS还可以这样拆箱转换详解
这篇文章主要给大家介绍了关于JS拆箱转换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
JavaScript开发者必备的10个Sublime Text插件
Sublime Text几乎是任何开发者在其工具箱的必备应用程序,这篇文章主要介绍了JavaScript开发者必备的10个Sublime Text插件，感兴趣的小伙伴们可以参考一下
2016-02-02
jQuery判断密码强度实现思路及代码
实现思路为：密码小于六位的时候，密码强度图片都为灰色;密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度等等，感兴趣的朋友可以参考下哈
2013-04-04
GreyBox技术总结（转）
GreyBox是一个遮罩层的组件也称模式窗口或模态窗口（所谓模态窗口，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的窗口），它运行以后可以产生不错的界面。
2010-11-11