HarmonyOS 使用XComponent 播放视频通过等比例缩放调整播放区域，通过截图功能截取出的图片显示异常

操作步骤：

1、视频等比例显示，调整播放区域。

this.xComponentController!.setXComponentSurfaceRect({offsetX:offX,offsetY:offY,surfaceWidth:videoWidth ,surfaceHeight:videoHeight});1.

2、读取pixmap:

public async getVideoFrame():Promise<PixelMap>{ 
 let rect:SurfaceRect = this.xComponentController?.getXComponentSurfaceRect() as SurfaceRect; 
 let region: image.Region = { x:rect.offsetX as number, y:rect.offsetY as number, size: { width: Math.trunc(rect.surfaceWidth) , height: Math.trunc(rect.surfaceHeight) } }; 
 let pix = await image.createPixelMapFromSurface(this.surfaceId, region); 
 return pix; 
}1.
2.
3.
4.
5.
6.

x为0

y为160

width：1208

height: 680

3. 保存为图片

SaveButton({text:SaveDescription.SAVE_IMAGE}) 
 .onClick(async () => { 
  try { 
   let pixmap = await this.livePlayerModel.getVideoFrame(); 
   try{ 
    const imagePackerApi = image.createImagePacker(); 
    let packOpts : image.PackingOption = { format:"image/jpeg", quality:98 }; 
    let data = await imagePackerApi.packing(pixmap, packOpts); 
    let context = getContext(); 
    let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); 
    let uri = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); 
    const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE); 
    let len = await fs.write(file.fd, data); 
    await fs.close(file.fd); 
   } 
   catch (error){ 
    this.onPlayerError(error); 
   } 
  } 
  catch (error){ 
   this.onPlayerError(error); 
  } 
 })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

4. 保存后的图片如附件，上面为黑色，下面缺失一部分画面。

HarmonyOS

Heiang

2024-11-12 10:47:02

浏览

回答 1

按赞同

按时间

FengTianYa

.xComponentController!.setXComponentSurfaceRect({offsetX:offX,offsetY:offY,surfaceWidth:videoWidth ,surfaceHeight:videoHeight});1.

设置宽高，还是显示的完整视频流，只是设置的显示的画面（surface）宽高。

let region: image.Region = { 
  x: rect.offsetX as number, 
  y: rect.offsetY as number, 
  size: { width: Math.trunc(rect.surfaceWidth), height: Math.trunc(rect.surfaceHeight) } 
}; 
let pix = await image.createPixelMapFromSurface(this.surfaceId, region);1.
2.
3.
4.
5.
6.

createPixelMapFromSurface接口是根据region把完整视频流的画面做裁剪，因为代码里传入的是显示surface的宽高，相较于完整视频流画面的宽高有缩小，所以导致保存的图片画面不全

如果希望截图完整视频播放画面，可以将该createPixelMapFromSurface接口入参region的宽高设置的和视频大小保持一致：

let region: image.Region = { 
  x: rect.offsetX as number, 
  y: rect.offsetY as number, 
  size: { width: Math.trunc(avPlayer.width), height: Math.trunc(avPlayer.height) } 
};1.
2.
3.
4.
5.

demo中Region修改为：

let region: image.Region = { 
  x: rect.offsetX as number, 
  y: rect.offsetY as number, 
  size: { 
    width: Math.trunc(this.playVideoModel!.avPlayer?.width as number), 
    height: Math.trunc(this.playVideoModel!.avPlayer?.height as number) 
  } 
};1.
2.
3.
4.
5.
6.
7.
8.

2024-11-12 17:04:34

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 使用XComponent 播放视频通过等比例缩放调整播放区域，通过截图功能截取出的图片显示异常

订阅鸿蒙技术特刊，精选内容抢先看