在前端开发中，用户上传的图片往往体积较大，直接上传会占用过多带宽，还会增加服务器存储成本。HTML5提供了File API、canvas等原生能力，可以在前端直接对图片进行压缩处理，减少上传文件的体积。下面介绍具体的实现方法。
核心实现原理
HTML5前端压缩图片的核心流程分为三步：首先通过File API获取用户选择的图片文件，将其转换为可操作的图片对象；然后使用canvas按照设定的尺寸重新绘制图片，同时可以调整输出质量；最后将canvas输出的图片数据转换为文件格式，供后续上传使用。
用到的HTML5核心API
File_API：用于读取用户选择的本地文件，获取文件的二进制数据和相关信息canvas：提供绘图能力，可调整图片的尺寸和输出质量URL.createObjectURL：将文件对象转换为临时的图片访问地址，方便图片加载
完整实现步骤
1. 创建基础页面结构
首先需要一个文件上传控件，用于用户选择需要压缩的图片，同时可以添加压缩参数配置区域。
<input type="file" id="uploadInput" accept="image/*"> <div> <label>压缩后最大宽度：<input type="number" id="maxWidth" value="800"></label> <label>压缩质量(0-1)：<input type="number" id="quality" value="0.7" step="0.1" min="0" max="1"></label> <button id="compressBtn">开始压缩</button> </div> <div id="preview"></div>
2. 读取用户选择的图片文件
通过File API监听文件上传控件的change事件，获取用户选择的图片文件，将其转换为临时URL供图片加载使用。
const uploadInput = document.getElementById('uploadInput');
const compressBtn = document.getElementById('compressBtn');
const preview = document.getElementById('preview');
let originalFile = null;
let originalImg = null;
// 监听文件选择事件
uploadInput.addEventListener('change', function(e) {
originalFile = e.target.files[0];
if (!originalFile) return;
// 校验是否为图片类型
if (!originalFile.type.startsWith('image/')) {
alert('请选择图片文件');
return;
}
// 创建临时URL加载图片
const imgUrl = URL.createObjectURL(originalFile);
originalImg = new Image();
originalImg.onload = function() {
URL.revokeObjectURL(imgUrl); // 加载完成后释放临时URL
preview.innerHTML = `原图尺寸：${originalImg.width}*${originalImg.height}，大小：${(originalFile.size/1024).toFixed(2)}KB`;
};
originalImg.src = imgUrl;
});
3. 实现图片压缩核心逻辑
压缩逻辑主要基于canvas的drawImage方法调整图片尺寸，再通过toBlob方法控制输出质量，生成压缩后的文件。
// 压缩图片方法
function compressImage(img, maxWidth, quality) {
return new Promise((resolve) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 计算压缩后的尺寸，保持宽高比
let width = img.width;
let height = img.height;
if (width > maxWidth) {
height = Math.round(height * maxWidth / width);
width = maxWidth;
}
// 设置canvas尺寸
canvas.width = width;
canvas.height = height;
// 绘制图片到canvas
ctx.drawImage(img, 0, 0, width, height);
// 输出压缩后的图片数据
canvas.toBlob((blob) => {
resolve({
blob,
width,
height,
size: blob.size
});
}, 'image/jpeg', quality);
});
}
// 绑定压缩按钮点击事件
compressBtn.addEventListener('click', async function() {
if (!originalImg) {
alert('请先选择图片');
return;
}
const maxWidth = Number(document.getElementById('maxWidth').value);
const quality = Number(document.getElementById('quality').value);
// 执行压缩
const result = await compressImage(originalImg, maxWidth, quality);
// 展示压缩结果
const compressedUrl = URL.createObjectURL(result.blob);
preview.innerHTML += `<br/>压缩后尺寸：${result.width}*${result.height}，大小：${(result.size/1024).toFixed(2)}KB`;
preview.innerHTML += `<br/><img src="${compressedUrl}" alt="压缩后的图片" style="max-width: 300px;">`;
// 可以在这里将result.blob上传到服务器
});
注意事项
- 压缩质量参数quality的取值范围是0到1，数值越小压缩率越高，图片质量损失越明显，建议设置在0.6到0.8之间平衡质量和体积
- canvas的toBlob方法在部分旧版本浏览器中可能不支持，需要做兼容性处理，或者改用toDataURL方法转换后再处理为文件
- 压缩PNG格式的图片时，调整quality参数可能效果不明显，因为PNG是无损压缩格式，建议对PNG图片主要做尺寸调整压缩
- 如果图片尺寸本身小于设置的最大宽度，不会进行放大处理，避免图片模糊
适用场景
这种前端压缩方法适合用户头像上传、商品图片上传、表单附件上传等场景，可以在用户上传前就减少文件体积，提升上传速度，也能降低服务器的存储和带宽成本。如果需要对图片做更复杂的处理，比如裁剪、添加水印等，也可以在canvas绘制阶段扩展对应逻辑。