如何使用JavaScript实现图片大小压缩调整

核心实现逻辑 #

前端压缩图片依赖HTML5的canvas API实现，流程为：加载原图 -> 绘制到设定尺寸的canvas画布 -> 按指定质量导出为新的图片资源，导出过程可以控制格式和压缩比，直接减小图片体积。

可复用的压缩工具函数 #

/**
 * 图片压缩函数
 * @param {File|string} source 原图地址或者本地选择的File对象
 * @param {Number} quality 导出质量 取值0-1，数值越小体积越小
 * @param {Number} maxWidth 导出图片最大宽度，超出会自动等比缩放
 * @returns {Promise} 返回压缩后的blob对象
 */
function compressImage(source, quality = 0.7, maxWidth = 800) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 跨域图片需要开启该配置，同时要求图片服务端配置允许跨域
    img.crossOrigin = 'anonymous';
    img.onload = function() {
      // 计算等比缩放后的宽高，避免图片变形
      let width = img.width;
      let height = img.height;
      if (width > maxWidth) {
        height = height * (maxWidth / width);
        width = maxWidth;
      }
      // 创建画布绘制图片
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      // 导出压缩后的资源，可指定导出为image/webp格式，同等画质下体积比jpeg小30%左右
      canvas.toBlob((blob) => {
        blob ? resolve(blob) : reject(new Error('图片压缩失败'));
      }, 'image/jpeg', quality);
    }
    img.onerror = reject;
    img.src = typeof source === 'string' ? source : URL.createObjectURL(source);
  })
}

结合现有代码的改造方案 #

你当前的逻辑是直接渲染服务端返回的原图地址，可根据场景选择两种优化方案：

• 方案1（优先选择）：上传图片阶段就调用上述压缩函数，将压缩后的图片传给服务端存储，后续加载直接使用压缩后的资源，从根源减小加载体积
• 方案2（兼容已有存量图片）：前端加载图片时先压缩再渲染，修改你的渲染逻辑如下：

for (let i=0; i<data.result.countrecords; i++) {
  productcard='<div class="ProductCardBlock">';
  productcard+='<div class="ProductImage">';
  // 新增自定义属性存储原图地址，避免压缩失败无法回退
  productcard+='<img class="ProductPicture" data-origin-src="../images/'+data.output[i]['imagepath']+'">';
  productcard+='</div>';
  productcard+='</div>';
  productcardsoutput+=productcard;
}

$('.centerarea').html(centeroutput);
// 渲染完成后批量压缩图片
$('.ProductPicture').each(async function() {
  const originSrc = $(this).data('origin-src');
  try {
    // 按容器尺寸设置最大宽度为400，质量0.6即可兼顾画质和体积
    const compressedBlob = await compressImage(originSrc, 0.6, 400);
    $(this).attr('src', URL.createObjectURL(compressedBlob));
  } catch (e) {
    // 压缩异常时兜底加载原图
    $(this).attr('src', originSrc);
  }
})

CSS适配优化 #

你当前的图片样式缺少自适应配置，补充后可避免图片变形，适配容器尺寸：

.ProductCardBlock .ProductImage .ProductPicture {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

压缩效果调整要点 #

• 质量参数建议取值在0.5-0.8区间，平衡画质损失和体积压缩比例
• 兼容条件允许的情况下优先导出webp格式，可获得更高的压缩率
• 最大宽度根据你的容器实际尺寸设置即可，当前你的图片容器为父元素宽度的25%，400px的最大宽度完全可以满足显示需求，不需要加载更大尺寸的原图

内容的提问来源于stack exchange，提问作者frontendprogrammer