纯前端做图片压缩?请使用这个神库!
lipiwang 2025-05-26 17:16 21 浏览 0 评论
Compressor.js 是一个基于 JavaScript 的轻量级图片压缩库（仅4KB），无需后端支持即可在浏览器端实现高质量的图片压缩。它通过Canvas实现图片处理，支持调整压缩质量、尺寸缩放、格式转换等核心功能。
核心优势：
- 零依赖，纯客户端处理
- 支持主流图片格式（JPEG/PNG/WEBP）
- 保留EXIF方向信息
- 提供丰富的配置选项
- 兼容现代浏览器（包括移动端）
使用场景
- 上传图片前的客户端预处理
- 移动端H5应用的图片优化
- 节省服务器带宽和存储空间
- 提升用户上传体验
npm install compressorjs<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>基础使用
// 获取文件对象（例如通过input[type=file]）
const file = document.querySelector('input[type=file]').files[0];
// 初始化压缩器
new Compressor(file, {
quality: 0.8, // 压缩质量（0-1）
maxWidth: 1920, // 最大宽度
maxHeight: 1080, // 最大高度
success(result) {
// 压缩成功回调
const formData = new FormData();
formData.append('file', result, result.name);
// 上传到服务器示例
fetch('/api/upload', {
method: 'POST',
body: formData,
});
},
error(err) {
console.error('压缩失败:', err);
},
});进阶配置说明
new Compressor(file, {
// 压缩质量配置
quality: 0.6,
// 尺寸限制
width: 800, // 固定宽度
height: 600, // 固定高度
resize: 'cover', // 缩放模式（cover/contain等）
// 格式转换
convertSize: 102400, // 超过100KB自动转成JPEG
mimeType: 'auto', // 自动检测最佳格式
// 高级处理
strict: true, // 严格模式（精确尺寸）
orient: true, // 保持EXIF方向信息
checkOrientation: true, // 检查EXIF方向
// 钩子函数
beforeDraw(ctx, canvas) {
// 压缩前可对Canvas进行额外处理
ctx.filter = 'grayscale(100%)';
},
drew(ctx, canvas) {
// 压缩后可进行后处理
const watermark = document.createElement('img');
watermark.onload = () => {
ctx.drawImage(watermark, 10, 10, 100, 50);
};
watermark.src = '/watermark.png';
},
});完整示例代码
<!DOCTYPE html>
<input type="file" accept="image/*" id="uploader">
<div id="preview"></div>
<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>
<script>
document.getElementById('uploader').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
new Compressor(file, {
quality: 0.7,
maxWidth: 1024,
convertSize: 500000, // 超过500KB转成WEBP
success(result) {
// 显示压缩前后对比
const preview = document.getElementById('preview');
// 原始文件预览
const origin = new Image();
origin.src = URL.createObjectURL(file);
origin.style = 'width: 300px; border: 2px solid red;';
// 压缩后预览
const compressed = new Image();
compressed.src = URL.createObjectURL(result);
compressed.style = 'width: 300px; border: 2px solid green;';
// 显示文件信息
const info = document.createElement('div');
info.innerHTML = `
原始大小：${(file.size/1024).toFixed(2)}KB
压缩后：${(result.size/1024).toFixed(2)}KB
压缩率：${(100 - (result.size/file.size*100)).toFixed(1)}%
`;
preview.append(origin, compressed, info);
},
error(err) {
alert(`压缩失败: ${err.message}`);
}
});
});
</script>注意事项
- 格式转换限制：Safari 14以下不支持WEBP格式
- 质量设置建议：
- JPEG推荐0.6-0.8
- PNG推荐保持1.0（无损）
- 性能优化：大文件（>5MB）建议先分片读取
- 兼容性处理：对于旧版浏览器需要polyfill：
// 添加Promise polyfill
if (typeof Promise === 'undefined') {
script.async = false;
document.write('<script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.8/dist/es6-promise.auto.min.js"><\/script>');
}相关推荐
- linux实例之设置时区的方式有哪些
-
linux系统下的时间管理是一个复杂但精细的功能，而时区又是时间管理非常重要的一个辅助功能。时区解决了本地时间和UTC时间的差异，从而确保了linux系统下时间戳和时间的准确性和一致性。比如文件的时间...
- Linux set命令用法（linux cp命令的用法）
-
Linux中的set命令用于设置或显示系统环境变量。1.设置环境变量：-setVAR=value：设置环境变量VAR的值为value。-exportVAR：将已设置的环境变量VAR导出，使其...
- python环境怎么搭建?小白看完就会!简简单单
-
很多小伙伴安装了python不会搭建环境，看完这个你就会了Python可应用于多平台包括Linux和MacOSX。你可以通过终端窗口输入"python"命令来查看本地是否...
- Linux环境下如何设置多个交叉编译工具链?
-
常见的Linux操作系统都可以通过包管理器安装交叉编译工具链，比如Ubuntu环境下使用如下命令安装gcc交叉编译器：sudoapt-getinstallgcc-arm-linux-gnueab...
- JMeter环境变量配置技巧与注意事项
-
通过给JMeter配置环境变量，可以快捷的打开JMeter：打开终端。执行jmeter。配置环境变量的方法如下。Mac和Linux系统在~/.bashrc中加如下内容：export...
- C/C++|头文件、源文件分开写的源起及作用
-
1C/C++编译模式通常，在一个C++程序中，只包含两类文件——.cpp文件和.h文件。其中，.cpp文件被称作C++源文件，里面放的都是C++的源代码；而.h文件则被称...
- linux中内部变量，环境变量，用户变量的区别
-
unixshell的变量分类在Shell中有三种变量：内部变量,环境变量,用户变量。内部变量：系统提供，不用定义，不能修改环境变量：系统提供，不用定义，可以修改,可以利用export将用户变量转为环...
- 在Linux中输入一行命令后究竟发生了什么?
-
Linux，这个开源的操作系统巨人，以其强大的命令行界面而闻名。无论你是初学者还是经验丰富的系统管理员，理解在Linux终端输入一条命令并按下回车后发生的事情，都是掌握Linux核心的关键。从表面上看...
- Nodejs安装、配置与快速入门（node. js安装）
-
Nodejs是现代JavaScript语言产生革命性变化的一个主要框架，它使得JavaScript从一门浏览器语言成为可以在服务器端运行、开发各种各样应用的通用语言。在不同的平台下，Nodejs的安装...
- Ollama使用指南【超全版】（olaplex使用方法图解）
-
一、Ollama快速入门Ollama是一个用于在本地运行大型语言模型的工具，下面将介绍如何在不同操作系统上安装和使用Ollama。官网：https://ollama.comGithub：http...
- linux移植（linux移植lvgl）
-
1uboot移植l移植linux之前需要先移植一个bootlader代码，主要用于启动linux内核，lLinux系统包括u-boot、内核、根文件系统（rootfs）l引导程序的主要作用将...
- Linux日常小技巧参数优化（linux参数调优）
-
Linux系统参数优化可以让系统更加稳定、高效、安全，提高系统的性能和使用体验。下面列出一些常见的Linux系统参数优化示例，包括修改默认配置、网络等多方面。1.修改默认配置1.1修改默认编辑器默...
- Linux系统编程—条件变量（linux 条件变量开销）
-
条件变量是用来等待线程而不是上锁的，条件变量通常和互斥锁一起使用。条件变量之所以要和互斥锁一起使用，主要是因为互斥锁的一个明显的特点就是它只有两种状态：锁定和非锁定，而条件变量可以通过允许线程阻塞和等...
- 面试题-Linux系统优化进阶学习（linux系统的优化）
-
一.基础必备优化:1.关闭SElinux2.FirewalldCenetOS7Iptables(C6)安全组(阿里云)3.网络管理服务||NetworkManager|network...
- 嵌入式Linux开发教程:Linux Shell
-
本章重点介绍Linux的常用操作和命令。在介绍命令之前，先对Linux的Shell进行了简单介绍，然后按照大多数用户的使用习惯，对各种操作和相关命令进行了分类介绍。对相关命令的介绍都力求通俗易懂，都给...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)