Meteor客户端压缩Cordova相机Base64图片至100KB（无画质损失）

兄弟，我懂你这种头疼——用lzma、lz-string这类字符串压缩库搞图片Base64根本没用，它们是针对文本压缩的，对图像编码后的字符串压缩率极低。给你几个亲测有效的方案，都是从图像本身入手压缩的，绝对能帮你把图片压到100KB以内还尽量保画质：

这是最灵活的方法，通过调整图片质量和尺寸来控制文件大小，还能循环试错直到达到目标。核心思路是把Base64转成Image对象，用Canvas绘制后再导出为JPEG，反复调整质量直到符合大小要求，实在不行再缩小尺寸。

代码示例：

async function compressBase64Image(base64, targetSizeKB = 100) {
  const targetSize = targetSizeKB * 1024; // 转成字节
  let quality = 0.3; // 初始质量和你之前的设置对齐
  let compressedBase64 = base64;

  // 第一步：把Base64转成Image对象
  const img = await new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = reject;
    image.src = base64;
  });

  // 创建Canvas画布
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 先尝试不改变尺寸，只调整质量
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 循环调整质量，直到文件大小达标或质量到最低阈值
  while (true) {
    const blob = await new Promise((resolve) => {
      canvas.toBlob(resolve, 'image/jpeg', quality);
    });
    const currentSize = blob.size;
    
    // 达标或者质量已经降到0.1（避免无限循环）就停止
    if (currentSize <= targetSize || quality <= 0.1) {
      // 把Blob转回Base64
      compressedBase64 = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.readAsDataURL(blob);
      });
      break;
    }
    
    quality -= 0.05; // 每次降低5%的质量
  }

  // 如果只调质量还是太大，就缩小图片尺寸
  const base64ByteSize = compressedBase64.length * 0.75; // Base64长度×0.75≈实际字节数
  if (base64ByteSize > targetSize) {
    // 计算缩放比例，保证缩小后的图片大小接近目标
    const scale = Math.sqrt(targetSize / (img.width * img.height * 4)); // 粗略估算
    const finalScale = Math.max(0.5, scale); // 最低缩放到原尺寸的50%，避免太模糊
    canvas.width = img.width * finalScale;
    canvas.height = img.height * finalScale;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    
    // 缩小后可以适当提高质量，保证画质
    const blob = await new Promise((resolve) => {
      canvas.toBlob(resolve, 'image/jpeg', 0.8);
    });
    compressedBase64 = await new Promise((resolve) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
  }

  return compressedBase64;
}

// 使用方式
compressBase64Image(yourBase64Image, 100).then(compressedImage => {
  // 这里拿到的就是压缩后的Base64
  console.log('压缩后大小:', (compressedImage.length * 0.75 / 1024).toFixed(2) + 'KB');
});

你之前只设置了quality:30，其实还可以在相机配置里限制图片的分辨率，先把大尺寸图片缩小，再用上面的Canvas方法压缩，效果会好很多。

修改Cordova相机的配置：

const cameraOptions = {
  quality: 30,
  destinationType: Camera.DestinationType.DATA_URL,
  targetWidth: 800, // 限制宽度，高度会按比例自动缩放
  targetHeight: 800,
  encodingType: Camera.EncodingType.JPEG,
  mediaType: Camera.MediaType.PICTURE
};

// 调用相机
navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, cameraOptions);

function onCaptureSuccess(imageData) {
  // 捕获到的图片已经是缩小后的Base64，再用方案一的方法二次压缩到100KB
  compressBase64Image(imageData, 100).then(compressedImage => {
    // 使用压缩后的图片
  });
}

function onCaptureFail(errorMsg) {
  alert('相机调用失败: ' + errorMsg);
}

如果不想自己写逻辑，可以用现成的专业图片压缩库Compressor.js，它支持直接设置目标文件大小，会自动调整质量和尺寸，非常省心。

代码示例：

// 先把Base64转成Blob对象
function base64ToBlob(base64) {
  const base64Str = base64.split(',')[1];
  const byteChars = atob(base64Str);
  const byteNumbers = new Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteNumbers[i] = byteChars.charCodeAt(i);
  }
  const byteArray = new Uint8Array(byteNumbers);
  return new Blob([byteArray], { type: 'image/jpeg' });
}

// 压缩函数
async function compressWithCompressor(base64, targetSizeKB = 100) {
  const blob = base64ToBlob(base64);
  
  return new Promise((resolve, reject) => {
    new Compressor(blob, {
      maxSize: targetSizeKB, // 目标大小，单位KB
      quality: 0.6, // 初始质量，库会自动调整
      success(compressedBlob) {
        // 把压缩后的Blob转回Base64
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.readAsDataURL(compressedBlob);
      },
      error(err) {
        reject(err);
      }
    });
  });
}

// 使用方式
compressWithCompressor(yourBase64Image, 100).then(compressedImage => {
  console.log('压缩后大小:', (compressedImage.length * 0.75 / 1024).toFixed(2) + 'KB');
});

注意： Compressor.js可以直接下载到项目本地引入，不需要依赖外部CDN，完全符合Cordova的离线使用场景。

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