如何在compressorjs中动态计算quality参数以达到目标压缩文件大小

核心问题说明 #

• quality 与图片压缩后体积不存在线性对应关系，直接使用原文件大小除以目标体积计算比例的逻辑不成立：一是计算结果会超出quality合法取值范围（0-1），二是体积压缩比还受图片内容、色彩分布、存储格式等多个因素影响，无法通过单次计算得到精准值。

可行实现方案 #

采用二分逼近法多次压缩测试，直到压缩后体积落在可接受的误差范围内，兼顾执行效率和准确率，示例实现如下：

// 目标大小，单位为KB
const TARGET_SIZE = 150;
// 允许的误差范围，可根据需求调整
const TOLERANCE = 5;
// 最大尝试次数，避免无限循环
const MAX_RETRY = 10;

/**
 * 计算符合目标大小的压缩quality值
 * @param {File} file 原始图片文件
 * @returns {Promise<number>} 符合要求的quality值
 */
async function getTargetQuality(file) {
  // 原文件本身小于目标大小直接返回最高质量
  if (file.size / 1024 <= TARGET_SIZE) {
    return 1;
  }
  let low = 0.1;
  let high = 1;
  let bestQuality = 0.5;
  let retryCount = 0;

  while (retryCount < MAX_RETRY) {
    const mid = (low + high) / 2;
    // 用当前mid作为quality压缩
    const compressedFile = await compressImage(file, mid);
    const compressedSize = compressedFile.size / 1024;

    if (Math.abs(compressedSize - TARGET_SIZE) <= TOLERANCE) {
      // 误差在允许范围内直接返回
      bestQuality = mid;
      break;
    } else if (compressedSize > TARGET_SIZE) {
      // 压缩后体积过大，调低质量
      high = mid;
    } else {
      // 压缩后体积过小，调高质量
      low = mid;
      bestQuality = mid;
    }
    retryCount++;
  }
  return bestQuality;
}

/**
 * 封装compressor压缩方法
 * @param {File} file 原始文件
 * @param {number} quality 压缩质量
 * @returns {Promise<File>} 压缩后的文件
 */
function compressImage(file, quality) {
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: quality,
      success: resolve,
      error: reject
    })
  })
}

// 调用示例
// getTargetQuality(selectedFile1).then(targetRatio => {
//   // 拿到精准quality后执行后续逻辑
// })

注意事项 #

• 可根据对精度的要求调整TOLERANCE和MAX_RETRY参数，误差范围越小、重试次数越多，准确率越高但耗时越长。
• 该方案适配动态变化的原始文件大小，无需提前预设固定参数。

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