IONIC-Capacitor/Camera：无Canvas/HTML的图片压缩与尺寸调整方案

我使用@capacitor/camera库通过以下代码拍照：

let capturedPhoto:any = await Camera
    .getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 30,
      height: 150,
      allowEditing: false,
      direction: CameraDirection.Front
    })
    .catch(err => {

    });

但在安卓或iOS设备上运行时，生成的PNG图片文件仍过大（近4MB）。该图片需存入Firebase Storage，因用户量较大需节省存储空间。现寻求无需使用Canvas或HTML元素的TypeScript图片压缩/尺寸调整实现方案，且无法在Camera.getPhoto配置中设置为JPG格式。

方案1：Capacitor社区原生图片压缩插件 #

利用原生层面的图片处理能力，无需依赖Canvas或HTML元素，性能更适配移动端：

• 安装插件：

npm install @capacitor-community/image-resizer
npx cap sync

• 实现压缩逻辑：

import { ImageResizer, ImageResizerOptions } from '@capacitor-community/image-resizer';
import { Filesystem, Directory } from '@capacitor/filesystem';

async function compressCapturedPhoto(capturedPhoto: any): Promise<string> {
  const filePath = capturedPhoto.webPath || capturedPhoto.path;
  
  const resizeOptions: ImageResizerOptions = {
    path: filePath,
    width: 150,
    height: 150,
    quality: 30,
    format: 'PNG',
  };

  const resizedImage = await ImageResizer.resize(resizeOptions);
  
  const compressedFile = await Filesystem.readFile({
    path: resizedImage.path,
    directory: Directory.Cache
  });

  return compressedFile.data;
}

// 调用示例
const compressedPhoto = await compressCapturedPhoto(capturedPhoto);
// 上传compressedPhoto到Firebase Storage

方案2：纯TypeScript PNG压缩（无原生插件依赖） #

使用纯TS的PNG压缩库处理图片数据，适合不想引入原生插件的场景：

• 安装依赖：

npm install pngquant.js

• 实现压缩逻辑：

import pngquant from 'pngquant.js';
import { Filesystem } from '@capacitor/filesystem';

async function compressPNGWithTS(capturedPhoto: any): Promise<string> {
  const fileData = await Filesystem.readFile({
    path: capturedPhoto.webPath || capturedPhoto.path,
  });

  const base64Raw = fileData.data.split(',')[1];
  const uint8Array = Uint8Array.from(atob(base64Raw), c => c.charCodeAt(0));

  const compressedData = await pngquant(uint8Array, {
    quality: [0.2, 0.3],
    speed: 1
  });

  const compressedBase64 = btoa(String.fromCharCode(...compressedData));
  return `data:image/png;base64,${compressedBase64}`;
}

// 调用示例
const compressedPNG = await compressPNGWithTS(capturedPhoto);

注意事项 #

• 方案1的原生插件压缩效率更高，适合批量图片处理；
• 方案2的纯TS压缩在低配置设备可能有性能延迟，建议仅用于小尺寸图片；
• 压缩后的base64数据可直接传入Firebase Storage的putString接口完成上传。

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