HarmonyOS鸿蒙Next中使用TaskPool实现高性能后台图片压缩

痛点及方案：

在图像处理类的时候，现在手机端图片高清的都较大，用户上传或编辑高清图片时，若在主线程直接压缩，极易造成界面卡死。所以我们需要借助HarmonyOS 5 提供的轻量级并发能力 TaskPool，通过TaskPool可将耗时任务移至后台线程执行，保障页面的流畅。

我们需要实现的主要为以下4点：

• 点击按钮选择本地图片；
• 自动在后台压缩质量为 70% 的 JPEG；
• 压缩完成后在 UI 上显示原图与压缩后对比；
• 全程 UI 流畅无卡顿。

完整代码实现

// entry/src/main/ets/pages/Index.ets
import { taskPool } from '@ohos.taskPool';
import image from '@ohos.multimedia.image';
import fileIo from '@ohos.file.fs';
import picker from '@ohos.file.picker';
import util from '@ohos.util';

const MAX_WIDTH = 800;
const COMPRESS_QUALITY = 70; // JPEG 质量 0-100

// 后台压缩任务函数（必须是顶层函数，不能是类方法）
async function compressImageTask(uri: string): Promise<string> {
  try {
    // 1. 打开源文件
    const fd = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY);
    const imageSource = image.createImageSource(fd);

    // 2. 获取图片信息，计算缩放比例
    const opts: image.GetImageInfoOptions = {};
    const info = await imageSource.getImageInfo(opts);
    let newWidth = info.width;
    let newHeight = info.height;
    if (info.width > MAX_WIDTH) {
      const ratio = MAX_WIDTH / info.width;
      newWidth = MAX_WIDTH;
      newHeight = Math.round(info.height * ratio);
    }

    // 3. 解码为 PixelMap
    const decodingOpts: image.DecodingOptions = {
      sampleSize: 1,
      desiredSize: { width: newWidth, height: newHeight },
      rotate: 0
    };
    const pixelMap = await imageSource.createPixelMap(decodingOpts);
    fileIo.closeSync(fd);

    // 4. 创建目标临时文件
    const tempPath = `/data/storage/el2/base/haps/${util.generateRandomUUID()}.jpg`;
    const outFd = fileIo.openSync(tempPath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE);

    // 5. 编码压缩
    const encodingOpts: image.EncodingOptions = {
      format: image.ImageFormat.JPEG,
      quality: COMPRESS_QUALITY
    };
    await pixelMap.encodeToFd(outFd, encodingOpts);
    fileIo.closeSync(outFd);

    return tempPath;
  } catch (error) {
    console.error(`[compressImageTask] Error: ${JSON.stringify(error)}`);
    throw error;
  }
}

@Entry
@Component
struct ImageCompressDemo {
  @State originalUri: string = '';
  @State compressedUri: string = '';
  @State isCompressing: boolean = false;
  @State errorMsg: string = '';

  // 选择图片
  async selectImage() {
    const photoSelectOptions = new picker.PhotoSelectOptions();
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    photoSelectOptions.maxSelectNumber = 1;

    try {
      const photoPicker = new picker.PhotoViewPicker();
      const result = await photoPicker.select(photoSelectOptions);
      if (result && result.length > 0) {
        this.originalUri = result[0].uri;
        this.compressedUri = '';
        this.errorMsg = '';
        this.compressImage(result[0].uri);
      }
    } catch (err) {
      this.errorMsg = '选择图片失败';
      console.error('[selectImage] Error:', err);
    }
  }

  // 启动后台压缩
  async compressImage(uri: string) {
    this.isCompressing = true;
    try {
      // 使用 TaskPool 执行后台任务
      const result = await taskPool.execute(compressImageTask, uri);
      this.compressedUri = result;
    } catch (err) {
      this.errorMsg = '压缩失败，请重试';
      console.error('[compressImage] Task failed:', err);
    } finally {
      this.isCompressing = false;
    }
  }

  build() {
    Column({ space: 20 }) {
      Text('图片压缩演示HarmonyOS 5  TaskPool')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button(this.isCompressing ? '压缩中...' : '选择图片并压缩')
        .enabled(!this.isCompressing)
        .onClick(() => {
          this.selectImage();
        })
        .width(200)

      if (this.errorMsg) {
        Text(this.errorMsg)
          .fontColor(Color.Red)
          .fontSize(14)
      }

      if (this.originalUri) {
        Column({ space: 10 }) {
          Text('原始图片').fontColor(Color.Gray)
          Image(this.originalUri)
            .width(300)
            .height(300)
            .objectFit(ImageFit.Contain)
            .border({ width: 1, color: Color.Gray })
        }
      }

      if (this.compressedUri) {
        Column({ space: 10 }) {
          Text('压缩后图片').fontColor(Color.Green)
          Image(`file://${this.compressedUri}`)
            .width(300)
            .height(300)
            .objectFit(ImageFit.Contain)
            .border({ width: 1, color: Color.Green })
        }
      }
    }
    .width('100%')
    .padding(20)
    .alignItems(HorizontalAlign.Center)
  }
}

需要注意读写权限配置：

{
  "module": {
    ...
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_IMAGE_LIST",
        "reason": "$string:permission_read_image_reason"
      },
      {
        "name": "ohos.permission.WRITE_MEDIA",
        "reason": "$string:permission_write_media_reason"
      }
    ],
    ...
  }
}