HarmonyOS鸿蒙Next中项目中咋实现图片压缩？

正好之前搞过，完美体现，看效果吧

使用场景

用户拍摄高清照片后，在上传前自动压缩至指定大小，节省流量并提升上传速度。

实现思路

第一步：ImagePacker 初始化。

第二步：先通过 image.createImageSource 从本地读取图片并解码为 PixelMap。

第三步：创建 ImagePacker 实例，调用异步 pack 方法，将 PixelMap 压缩为 ArrayBuffer。

需要注意的是：需要在真机上实现。

完整实现代码

import image from '@ohos.multimedia.image';
import { common } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import fs from '@ohos.file.fs';

@Entry
@Component
struct ImageCompressPage {
  @State sourceImage: PixelMap | undefined = undefined;
  @State compressedImage: PixelMap | undefined = undefined;
  @State logMsg: string = '准备就绪';

  // 获取 UIAbilityContext
  private getContext(): common.UIAbilityContext {
    return this.getUIContext().getHostContext() as common.UIAbilityContext;
  }

  async aboutToAppear() {
    try {
      const resourceMgr = this.getContext().resourceManager;

      const fileData = await resourceMgr.getMediaContent($r('app.media.startIcon'));


      const buffer = fileData.buffer.slice(fileData.byteOffset, fileData.byteOffset + fileData.byteLength);
    console.log(JSON.stringify(buffer))
      const imageSource = image.createImageSource(buffer);
      this.sourceImage = await imageSource.createPixelMap();

      this.logMsg = '资源图片加载成功';
    } catch (err) {
      const error = err as BusinessError;
      this.logMsg = `加载失败: ${error.code} - ${error.message}`;
      console.error('[ImageCompress] aboutToAppear Error:', JSON.stringify(err));
    }
  }

  async compressImage() {
    if (!this.sourceImage) {
      this.logMsg = '源图片未加载，无法压缩';
      return;
    }

    try {
      this.logMsg = '正在压缩...';
      const context = this.getContext();

      const packer = image.createImagePacker();

      const packOpts: image.PackingOption = {
        format: 'image/jpeg',
        quality: 50
      };

      const buffer: ArrayBuffer = await packer.packing(this.sourceImage, packOpts);

      packer.release();

      // 保存文件
      const targetPath = `${context.filesDir}/compressed_image_${Date.now()}.jpg`;
      const file = fs.openSync(targetPath, fs.OpenMode.CREATE | fs.OpenMode.WRITE_ONLY);
      fs.writeSync(file.fd, buffer);
      fs.closeSync(file);

      // 重新读取压缩后的图片用于展示
      const newImageSource = image.createImageSource(buffer);
      this.compressedImage = await newImageSource.createPixelMap();

      const fileSize = buffer.byteLength;
      this.logMsg = `压缩成功!\n格式: JPEG\n质量: 50%\n大小: ${fileSize} Bytes\n路径: ${targetPath}`;

    } catch (err) {
      const error = err as BusinessError;
      this.logMsg = `压缩失败: Code ${error.code}, Message: ${error.message}`;
      console.error(`[ImageCompress] Error: ${JSON.stringify(err)}`);
    }
  }

  build() {
    Column() {
      Text('图片质量压缩')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 10 })

      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        Column() {
          if (this.sourceImage) {
            Image(this.sourceImage)
              .width(100)
              .height(100)
              .objectFit(ImageFit.Cover)
              .border({ width: 1, color: Color.Gray })
          } else {
            Text('原图片(未加载)')
              .width(100)
              .height(100)
              .fontSize(12)
              .textAlign(TextAlign.Center)
              .backgroundColor('#f0f0f0')
          }
          Text('原图片')
            .fontSize(12)
            .margin({ top: 5 })
        }

        Text('->')
          .fontSize(20)
          .fontColor(Color.Gray)

        Column() {
          if (this.compressedImage) {
            Image(this.compressedImage)
              .width(100)
              .height(100)
              .objectFit(ImageFit.Cover)
              .border({ width: 1, color: Color.Gray })
          } else {
            Text('压缩后(空)')
              .width(100)
              .height(100)
              .fontSize(12)
              .textAlign(TextAlign.Center)
              .backgroundColor('#f0f0f0')
          }
          Text('JPEG (50%)')
            .fontSize(12)
            .margin({ top: 5 })
        }
      }
      .width('100%')
      .padding(20)

      Text(this.logMsg)
        .fontSize(14)
        .fontColor('#333')
        .width('90%')
        .margin({ top: 20, bottom: 20 })

      Button('开始压缩并保存')
        .onClick(() => {
          this.compressImage();
        })
    }
    .width('100%')
    .height('100%')
    .padding({ left: 20, right: 20 })
  }
}

图片压缩主要是通过packToData和scale实现图片压缩，通过对图片进行缩放或者设置编码参数进行压缩。具体实现可以参考以下几种方案。

方案一：质量压缩

通过修改编码质量参数quality，该参数仅对JPEG图片生效。WebP、PNG等图片均为无损编码。

/**
 * 质量压缩
 */
async qualityCompressionMethod(quality: number) {
  const qualityCompressionMethod = await this.compressionMethod.compressionMethod(100, quality);
  this.showPixelMap = qualityCompressionMethod[0];
  this.savePixelMap = qualityCompressionMethod[1];
  this.afterCompressionSize = qualityCompressionMethod[2];
  this.showCompressFormat = qualityCompressionMethod[3];
}

/**
 * 压缩
 */
async compressionMethod(imageScaleVal: number,
  imageQualityVal: number): Promise<[PixelMap, PixelMap, string, string]> {
  const ALBUM_PATH: string = this.uris[0];
  const file = fs.openSync(ALBUM_PATH, fs.OpenMode.READ_ONLY);
  let buffer = new ArrayBuffer(fs.statSync(file.fd).size);
  fs.readSync(file.fd, buffer);
  fs.closeSync(file);
  const decodingOptions: image.DecodingOptions = { editable: true };
  const imageSource: image.ImageSource = image.createImageSource(buffer);
  return new Promise<[PixelMap, PixelMap, string, string]>((resolve) => {
    imageSource.createPixelMap(decodingOptions).then(async (originalPixelMap: image.PixelMap) => {
      if (AppStorage.get('sizeFlag') != undefined) {
        this.sizeFlag = AppStorage.get('sizeFlag')!;
      }
      if (this.sizeFlag) {
        // 使用scale对图片进行缩放。入参分别为图片宽高的缩放倍数
        await originalPixelMap.scale(imageScaleVal / 100, imageScaleVal / 100);
        // savePixelMap用于把压缩后的图片保存到图库时使用。由于保存图片时调用的packToFile内部会做类似packing的处理，所以这里只保存scale缩放尺寸后的PixelMap。
        this.savePixelMap = originalPixelMap;
        this.imageQuality = imageScaleVal;
      }
      // savePixelMap用于把压缩后的图片保存到图库时使用。
      this.savePixelMap = originalPixelMap;
      if (AppStorage.get('outputCompressFmt') != undefined) {
        this.afterCompressFmt = AppStorage.get('outputCompressFmt')!;
      }

      // packing压缩图片
      let compressedImageData: ArrayBuffer =
        await this.packing(originalPixelMap, imageQualityVal, this.afterCompressFmt);
      // 压缩后的ArrayBuffer数据转PixelMap
      let imageSource = image.createImageSource(compressedImageData);
      let opts: image.DecodingOptions = { editable: true };
      // showPixelMap用于显示压缩后的图片
      const pixelMap: image.PixelMap = await imageSource.createPixelMap(opts);
      this.showPixelMap = pixelMap;
      // showCompressFormat用于显示压缩后的图片格式
      this.showCompressFormat = this.afterCompressFmt;
      // 显示估算packing压缩后的图片大小。该图片在内存中作为ArrayBuffer数据的压缩后大小，这一数值并不直接等同于该图片在最终保存到相册时的实际文件大小。
      this.afterCompressionSize = (compressedImageData.byteLength / BYTE_CONVERSION).toFixed(1);
      resolve([this.showPixelMap, this.savePixelMap, this.afterCompressionSize, this.afterCompressFmt]);
    }).catch((err: BusinessError) => {
      hilog.error(0x0000, TAG, `Failed to create PixelMap, error code: ${err.code}, message: ${err.message}.`);
    });

  });
}

方案二：尺寸压缩

调用scale对图片的宽高进行缩放，缩放后的PixelMap通过packToData进行压缩

/**
 * 尺寸压缩
 */
async sizeCompressionMethod(size: number) {
  this.sizeFlag = true;
  AppStorage.setOrCreate('sizeFlag', this.sizeFlag);
  const sizeCompressionMethod = await this.compressionMethod.compressionMethod(size, 100);
  this.showPixelMap = sizeCompressionMethod[0];
  this.afterCompressionSize = sizeCompressionMethod[2];
  this.showCompressFormat = sizeCompressionMethod[3];
}

鸿蒙Next中，使用@ohos.multimedia.image模块实现图片压缩。通过image.createImagePacker()创建打包器，设置质量参数（quality）进行有损压缩，或指定输出格式（如JPEG、PNG）。也可调用image.compressImage()直接压缩已有图片。