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

利用js实现图片压缩功能

news 2025/7/13 11:38:34

图片压缩在众多应用场景中扮演着至关重要的角色，尤其是在客户端上传图片时。原始图片往往体积庞大，直接上传不仅消耗大量带宽资源，还可能导致上传速度缓慢，严重影响用户体验。因此，在图片上传至服务器前对其进行压缩处理成为了一项关键优化措施。通过压缩，图片文件大小显著减小，从而加快上传速度，提升效率，确保用户获得流畅无阻的使用体验，特别是在网络条件不佳的情况下，这一优化显得尤为重要。
简而言之，图片压缩能有效解决大文件上传带来的带宽压力与时间成本问题，是提高应用响应速度、增强用户满意度的有效手段。它通过对图片进行智能处理，去除冗余数据，在尽可能保持视觉质量的同时大幅缩减文件大小，使得图片上传过程更加迅速高效，进而优化整个应用的性能表现。

一、效果演示

在这里插入图片描述

二、程序代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><style>div {text-align: center;}input {height: 50px;line-height: 50px;}</style>
</head><body><input id="file" type="file" accept="image/*"><div>压缩前的图片大小：<span id="beforeSize"></span><p><img id="before" /></p></div><div>压缩后的图片大小：<span id="afterSize"></span><p><img id="after" /></p></div><script>$("#file").change(function () {const file = this.files[0];$("#before").attr("src", URL.createObjectURL(file));$("#before").css({width: '500',height: 'auto'});const fileSize = file.size / 1024;$("#beforeSize").html(fileSize.toFixed(2) + " KB");if (!file) return;compressImage(file, 1, 0.7).then(base64 => {$("#after").attr("src", base64);$("#after").css({width: '500',height: 'auto'});const sizeInKB = (base64.length * 3 / 4) / 1024;$("#afterSize").html(sizeInKB.toFixed(2) + " KB");});});function compressImage(file, maxWidth, quality) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = function (e) {const img = new Image();img.onload = function () {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);resolve(canvas.toDataURL('image/jpeg', quality || 0.9));};img.src = e.target.result;};reader.readAsDataURL(file);});}</script>
</body></html>