# 如何使用TaskGroup快速实现图片灰度化

#### 问题现象

在处理像素比较大的图片时，放在单个线程中耗时也很长。如何使用TaskGroup实现分片处理图片？比如图片灰度化。

#### 背景知识

*   TaskGroup表示任务组，一次执行一组任务，适用于执行一组有关联的任务。如果所有任务正常执行，异步执行完毕后返回所有任务结果的数组，数组中元素的顺序与addTask的顺序相同；如果任意任务失败，则会抛出对应异常。如果任务组中存在多个任务失败的情况，则会抛出第一个失败任务的异常。任务组可以多次执行，但执行后不能新增任务。
*   灰度化是将彩色图像转换为灰度图像的处理过程，其核心原理是通过统一像素点的R、G、B分量值实现色彩空间转换。在该转换过程中，就是将彩色图像转换为每个像素点R、G、B分量值相等的灰度图像。

#### 解决方案

将图片的像素数据分片，通过TaskGroup一次执行一组图片灰度化的任务，实现并行处理，达到快速灰度化，具体步骤如下：

1.  读取图片像素数据，分割为四份，添加到TaskGroup中。等待返回数据，并且把数据合并，重新编码为图片，代码示例如下：
    
    ```
    pixelMapGrayScale(pixelMap: PixelMap) {
      // 读取pixelMap的像素数据。
      let width = pixelMap.getImageInfoSync().size.width;
      let height = pixelMap.getImageInfoSync().size.height;
      let readBuffer: ArrayBuffer = new ArrayBuffer(width * height * 4);
      pixelMap.readPixelsToBufferSync(readBuffer);
      // 分成四段并发调度。
      let number: number = 4 * Math.ceil(width * height / 4);
      let buffer1: ArrayBuffer = readBuffer.slice(0, number);
      let buffer2: ArrayBuffer = readBuffer.slice(number, number * 2);
      let buffer3: ArrayBuffer = readBuffer.slice(number * 2, number * 3);
      let buffer4: ArrayBuffer = readBuffer.slice(number * 3);
    
      let group: taskpool.TaskGroup = new taskpool.TaskGroup();
      group.addTask(imageProcessing, buffer1);
      group.addTask(imageProcessing, buffer2);
      group.addTask(imageProcessing, buffer3);
      group.addTask(imageProcessing, buffer4);
    
      taskpool.execute(group, taskpool.Priority.HIGH).then((res: Array<Object>) => {
        // 结果数组汇总处理，重新编码为图片。
        console.info('execute res success', res.length);
        let byteBufferTemp: Uint8Array = new Uint8Array(new ArrayBuffer(width * height * 4));
        let offset: number = 0;
        for (let index = 0; index < res.length; index++) {
          const element = res[index] as Uint8Array;
          byteBufferTemp.set(element, offset);
          offset += element.length;
        }
        let color: ArrayBuffer = byteBufferTemp.buffer as ArrayBuffer;
        let opts: image.InitializationOptions =
          {
            editable: true,
            pixelFormat: pixelMap.getImageInfoSync().pixelFormat,
            size: { height: height, width: width }
          };
        this.pixelMapTemp = image.createPixelMapSync(color, opts);
        console.info('execute group success');
      });
    }
    ```
    
2.  开启图片处理线程，将像素做灰度化，代码示例如下：
    
    ```
    function imageProcessing(dataSlice: ArrayBuffer): Uint8Array {
      // 图像灰度化处理操作
      let byteBuffer: Uint32Array = new Uint32Array(dataSlice);
      let byteBufferTemp: Uint8Array = new Uint8Array(new ArrayBuffer(byteBuffer.length * 4));
      for (let index = 0; index < byteBuffer.length; index++) {
        // 通过移位方式获取RGBA各通道的值。
        let rgb = byteBuffer[index];
        let red = (rgb >> 0) & 0x000000ff;
        let green = (rgb >> 8) & 0x000000ff;
        let blue = (rgb >> 16) & 0x000000ff;
        let alpha = (rgb >> 24) & 0x000000ff;
        // 加权平均算法，获取灰度值。
        let gray = (0.299 * red + 0.587 * green + 0.114 * blue);
        byteBufferTemp[index * 4] = gray;
        byteBufferTemp[index * 4 + 1] = gray;
        byteBufferTemp[index * 4 + 2] = gray;
        byteBufferTemp[index * 4 + 3] = alpha;
      }
      return byteBufferTemp;
    }
    ```
    

完整示例参考如下：

```
import { taskpool } from '@kit.ArkTS';
import { image } from '@kit.ImageKit';
import { common } from '@kit.AbilityKit';

@Concurrent
function imageProcessing(dataSlice: ArrayBuffer): Uint8Array {
  // 图像灰度化处理操作
  let byteBuffer: Uint32Array = new Uint32Array(dataSlice);
  let byteBufferTemp: Uint8Array = new Uint8Array(new ArrayBuffer(byteBuffer.length * 4));
  for (let index = 0; index < byteBuffer.length; index++) {
    // 通过移位方式获取RGBA各通道的值。
    let rgb = byteBuffer[index];
    let red = (rgb >> 0) & 0x000000ff;
    let green = (rgb >> 8) & 0x000000ff;
    let blue = (rgb >> 16) & 0x000000ff;
    let alpha = (rgb >> 24) & 0x000000ff;
    // 加权平均算法，获取灰度值。
    let gray = (0.299 * red + 0.587 * green + 0.114 * blue);
    byteBufferTemp[index * 4] = gray;
    byteBufferTemp[index * 4 + 1] = gray;
    byteBufferTemp[index * 4 + 2] = gray;
    byteBufferTemp[index * 4 + 3] = alpha;
  }
  return byteBufferTemp;
}

@Entry
@Component
struct Index {
  @State pixelMap: image.PixelMap | undefined = undefined;
  @State pixelMapTemp: image.PixelMap | undefined = undefined;

  // 通过rawfile目录下的文件名称创建pixelMap。
  createPixelMapFromFile(url: string) {
    let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
    const fileData: Uint8Array = context.resourceManager.getRawFileContentSync(url);
    // 创建一个可供编辑的图片。
    const buffer = fileData.buffer.slice(fileData.byteOffset, fileData.byteLength + fileData.byteOffset);
    let imageSource = image.createImageSource(buffer);
    const options: image.DecodingOptions = {
      editable: true,
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
    };
    let pixelMap: PixelMap = imageSource.createPixelMapSync(options);
    // 资源释放
    imageSource.release();
    return pixelMap;
  }

  pixelMapGrayScale(pixelMap: PixelMap) {
    // 读取pixelMap的像素数据。
    let width = pixelMap.getImageInfoSync().size.width;
    let height = pixelMap.getImageInfoSync().size.height;
    let readBuffer: ArrayBuffer = new ArrayBuffer(width * height * 4);
    pixelMap.readPixelsToBufferSync(readBuffer);
    // 分成四段并发调度。
    let number: number = 4 * Math.ceil(width * height / 4);
    let buffer1: ArrayBuffer = readBuffer.slice(0, number);
    let buffer2: ArrayBuffer = readBuffer.slice(number, number * 2);
    let buffer3: ArrayBuffer = readBuffer.slice(number * 2, number * 3);
    let buffer4: ArrayBuffer = readBuffer.slice(number * 3);

    let group: taskpool.TaskGroup = new taskpool.TaskGroup();
    group.addTask(imageProcessing, buffer1);
    group.addTask(imageProcessing, buffer2);
    group.addTask(imageProcessing, buffer3);
    group.addTask(imageProcessing, buffer4);

    taskpool.execute(group, taskpool.Priority.HIGH).then((res: Array<Object>) => {
      // 结果数组汇总处理，重新编码为图片。
      console.info('execute res success', res.length);
      let byteBufferTemp: Uint8Array = new Uint8Array(new ArrayBuffer(width * height * 4));
      let offset: number = 0;
      for (let index = 0; index < res.length; index++) {
        const element = res[index] as Uint8Array;
        byteBufferTemp.set(element, offset);
        offset += element.length;
      }
      let color: ArrayBuffer = byteBufferTemp.buffer as ArrayBuffer;
      let opts: image.InitializationOptions =
        {
          editable: true,
          pixelFormat: pixelMap.getImageInfoSync().pixelFormat,
          size: { height: height, width: width }
        };
      this.pixelMapTemp = image.createPixelMapSync(color, opts);
      console.info('execute group success');
    });
  }

  aboutToAppear(): void {
    // 通过rawfile目录下的文件名称创建pixelMap，‘testicon.png’是测试图片，开发者需要在rawfile目录替换实际图片
    this.pixelMap = this.createPixelMapFromFile('testicon.png');
  }

  build() {
    Row() {
      Column() {
        Text('原图')
        Image(this.pixelMap)
          .objectFit(ImageFit.Contain)
          .width('30%')
          .height(120)
          .margin({
            top: 3,
            bottom: 3,
            left: 5,
            right: 5
          })
        Text('灰度图')
        Image(this.pixelMapTemp)
          .objectFit(ImageFit.Contain)
          .width('30%')
          .height(120)
          .margin({
            top: 3,
            bottom: 3,
            left: 5,
            right: 5
          })
        Button('加权平均值')
          .backgroundColor('#0D9FFB')
          .margin({
            top: 10,
            bottom: 10,
            left: 5,
            right: 5
          })
          .onClick(() => {
            this.pixelMapGrayScale(this.pixelMap as image.PixelMap);
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
```

#### 常见FAQ

Q：在子线程进行蓝牙通信，需要一直发送，选用哪种线程类型，TaskGroup是否可以？

A：需要常驻的耗时任务建议使用Worker线程。TaskGroup适用于执行一组有关联的耗时较短的任务。

Q：在调用addTask时一直报错：executed taskGroup cannot addTask。原因是什么？

A：在execute之后调用addTask就会产生这样的报错。TaskGroup是一次执行一组任务，适用于执行一组有关联的任务，不要在execute之后调用addTask。

Q：单个TaskGroup中的多个task任务是无序的吗？多个TaskGroup并发的时候是无序的？

A：单个TaskGroup中的多个task任务是无序的，但是返回的结果是按照addTask的顺序返回。多个TaskGroup并发的时候是无序。