JS压缩图片的核心原理是利用Canvas重绘图像，通过缩小尺寸、降低质量、转换格式减小体积。1. 原理：借助Canvas的drawImage和toBlob实现图像重绘与输出，结合分辨率调整和质量参数控制文件大小，并可将PNG转JPEG提升压缩率。2. 步骤：先获取file对象，用FileReader加载为Image，再创建canvas按最大边缩放绘制，最后转为Blob或Data URL。3. 细节：需判断图片类型避免无效压缩，注意EXIF方向信息丢失问题，手动处理旋转，及时释放临时对象内存，兼容低版本浏览器使用toDataURL降级。前端压缩减少上传流量，提升体验，但不能替代服务端校验与处理。
JS压缩图片的核心原理是利用Canvas的绘图能力重新绘制图片，并通过调整图片尺寸和设置质量参数来减小文件体积。整个过程不依赖服务器，完全在浏览器端完成，适合前端上传前的预处理。
1. 压缩的基本原理
JavaScript本身不能直接修改图片二进制数据，但可以通过以下方式实现“压缩”：使用Canvas重绘图像：将图片绘制到canvas元素上，再通过canvas.toDataURL()或canvas.toBlob()输出新的、更小的数据。
降低分辨率：缩小图片宽高，减少像素总数，显著降低体积。
控制输出质量：JPEG格式支持设置压缩质量（0-1之间），值越低文件越小，但画质越差。
转换格式：例如将PNG转为JPEG，无损的PNG通常比有损但高压缩率的JPEG大得多。
2. 实现步骤详解
下面是完整的客户端图片压缩流程，适用于用户选择图片后上传前的处理。
步骤一：获取文件对象通过input[type=file]获取用户选择的图片文件：const file = document.querySelector('input[type=file]').files[0];步骤二：创建Image对象加载图片用FileReader读取文件并生成可用的图片源：Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载const reader = new FileReader();reader.onload = function(e) {const img = new Image();img.src = e.target.result;img.onload = function() {// 图片加载完成后进行压缩compress(img, 800, 0.8);}};reader.readAsDataURL(file);步骤三：使用Canvas进行压缩定义compress函数，控制最大边长和质量：function compress(img, maxWidth, quality) {let { width, height } = img;// 按比例缩放，保持最大边不超过maxWidthif (width > height && width > maxWidth) {height = Math.round(height * maxWidth / width);width = maxWidth;} else if (height > maxWidth) {width = Math.round(width * maxWidth / height);height = maxWidth;}const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = width;canvas.height = height;// 将图片绘制到canvas（自动压缩）ctx.drawImage(img, 0, 0, width, height);// 输出Blob对象（推荐用于上传）return new Promise(resolve => {canvas.toBlob(resolve, 'image/jpeg', quality);});}步骤四：获取压缩后的文件并上传compress(img, 800, 0.8).then(blob => {const compressedFile = new File([blob], 'compressed.jpg', { type: 'image/jpeg' });// 可以用FormData上传const formData = new FormData();formData.append('image', compressedFile);fetch('/upload', { method: 'POST', body: formData });});
3. 关键细节说明
实际开发中需要注意以下几点：图片类型判断：只对JPEG/PNG等大图做压缩，GIF或小图标可跳过。
EXIF信息丢失：Canvas压缩会丢掉方向信息（如手机拍摄的旋转），必要时需用库（如exif-js）读取Orientation并手动旋转。
内存释放：临时创建的canvas和img应及时清理，避免内存泄漏。
兼容性：toBlob在老版本IE不支持，可用toDataURL降级处理。
基本上就这些。前端压缩虽不能替代服务端处理，但能有效减少上传流量，提升用户体验。