图片压缩处理_javascript图像优化-js教程-PHP中文网

图片压缩处理_javascript图像优化

betcha

发布： 2025-11-26 17:05:02

原创

258人浏览过

前端压缩图片可减小文件体积、提升加载速度、降低服务器负载。通过JavaScript的Canvas API，读取图片并绘制到画布，再以指定尺寸和质量导出为Blob或Data URL实现压缩。关键参数包括最大宽度（maxWidth）、质量系数（quality，推荐0.7~0.8）及输出格式（如JPEG或WebP）。示例代码使用FileReader加载图片，Image对象解码，canvas重绘并调用toBlob生成压缩后图像。需注意设备性能差异、透明通道丢失问题，建议结合Worker处理批量任务或使用browser-image-compression等库优化开发流程。

图片压缩处理_javascript图像优化

在网页开发中，图片压缩处理是提升加载速度和用户体验的重要环节。使用 JavaScript 可以在浏览器端对图像进行前端优化，减少上传前的数据体积，减轻服务器压力，同时加快页面渲染。

为什么要在前端压缩图片？

用户上传的原始图片往往体积大、分辨率高，直接上传会消耗更多带宽和存储资源。通过 JavaScript 在客户端完成压缩，能有效：

降低图片文件大小，节省传输时间
减少服务器负载和存储成本
提升移动端上传体验
控制图片尺寸和格式统一

使用 Canvas 进行图像压缩

JavaScript 中最常用的图片压缩方式是利用 Canvas API 将图片绘制到画布并重新导出，通过调整尺寸或质量实现压缩。

基本流程如下：

立即学习“Java免费学习笔记（深入）”；

佐糖

一个AI驱动的图像处理和图片编辑平台，支持在线抠图、去水印、模糊照片变清晰、无损放大、图片裁剪、图片压缩和黑白照片上色等

查看详情

读取用户选择的图片（File 对象）
使用 FileReader 转为 base64 数据
创建 Image 对象加载图片
将图片绘制到 <canvas> 元素
调用 toDataURL 或 toBlob 方法输出压缩后的图像

示例代码：

const compressImage = (file, options) => {
  return new Promise((resolve) => {
    const { maxWidth = 800, quality = 0.8 } = options;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
<pre class='brush:php;toolbar:false;'>img.src = URL.createObjectURL(file);
img.onload = () => {
  let { width, height } = img;

  if (width > maxWidth) {
    height = (height * maxWidth) / width;
    width = maxWidth;
  }

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(img, 0, 0, width, height);

  canvas.toBlob(
    (blob) => {
      resolve(blob);
      URL.revokeObjectURL(img.src);
    },
    'image/jpeg',
    quality
  );
};

登录后复制

}); };

// 使用示例 const fileInput = document.getElementById('image-upload'); fileInput.addEventListener('change', async (e) => { const file = e.target.files[0]; const compressedBlob = await compressImage(file, { maxWidth: 800, quality: 0.7, });

// 可将 Blob 转为 File 或上传至服务器 const compressedFile = new File([compressedBlob], 'compressed.jpg', { type: 'image/jpeg', }); });