HarmonyOS【相机服务】连续拍照场景如何将多张照片合成一张？

// 图片合并 使用 canvas 
public static async imageMerge(img1: PixelMap, img2: PixelMap) { 
  // 获取照片信息 
  let info1: image.ImageInfo = await img1.getImageInfo(); 
  let info2: image.ImageInfo = await img2.getImageInfo(); 
  let twidth = info1.size.width + info2.size.width; 
  let theight = info1.size.height + info2.size.height 
  // 创建离屏的 canvas 
  let offCanvas2D = new OffscreenCanvas(twidth, theight); 
  let offContext = offCanvas2D.getContext("2d"); 
  offContext.drawImage(img1, 0, 0, info1.size.width, info1.size.height); 
  offContext.drawImage(img2, 0, info1.size.height, info2.size.width, info2.size.height); 
  // 获取合并后的 img pixel 
  let finalPixel = offContext.getPixelMap(0, 0, twidth, theight); 
  return finalPixel; 
} 
public static async saveImage(img: PixelMap, path: string) { 
  let imgPacker = image.createImagePacker(); 
  let imgBuf = await imgPacker.packing(img, {format: "image/jpeg", quality: 100}); 
  let fd = fileIo.openSync(path, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE).fd; 
  fileIo.writeSync(fd, imgBuf); 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

@State pixelMaps: Array<image.PixelMap | undefined> = new Array();
1.

setPhotoOutputCb(photoOutput: camera.PhotoOutput) { 
  //设置回调之后，调用photoOutput的capture方法，就会将拍照的buffer回传到回调中 
  photoOutput.on('photoAvailable', (errCode: BusinessError, photo: camera.Photo): void => { 
    let imageObj = photo.main; 
    imageObj.getComponent(image.ComponentType.JPEG, async (errCode: BusinessError, component: image.Component): Promise<void> => { 
      console.info('CameraDemo getComponent start'); 
      if (errCode || component === undefined) { 
        console.error('CameraDemo getComponent failed'); 
        return; 
      } 
      let buffer: ArrayBuffer; 
      if (component.byteBuffer) { 
        buffer = component.byteBuffer; 
        let sourceOptions: image.SourceOptions = { 
          sourceDensity: 0, // 在不确定当前密度时传0 
          sourcePixelFormat: image.PixelMapFormat.RGBA_8888, 
          sourceSize: this.imageSize 
        } 
        let imageSource: image.ImageSource = image.createImageSource(buffer, sourceOptions); 
        let opts: image.InitializationOptions = { 
          editable: false, 
          pixelFormat: image.PixelMapFormat.RGBA_8888, 
          size: this.imageSize 
        } 
        let pixelMap = await imageSource.createPixelMap(opts); 
        this.pixelMaps[this.pixelMaps.length++] = pixelMap; 
      } else { 
        console.error('CameraDemo byteBuffer is null'); 
        return; 
      } 
    }); 
  }); 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.

Button('合并') 
  .onClick(async () => { 
    if (this.pixelMaps.length > 2 && this.pixelMaps[0] != undefined && this.pixelMaps[1] != undefined) { 
      let imgm = await ImageUtil.imageMerge(this.pixelMaps[0], this.pixelMaps[1]); 
      ImageUtil.saveImage(imgm, getContext(this).cacheDir + "/test.jpg"); 
    } 
  })
1.
2.
3.
4.
5.
6.
7.