HarmonyOS 组件旋转后，使用componentSnapshot截图，截到的图片不是显示给用户显示的样子？

Question

Image($r('app.media.img2'))
  .width('100%')
  .height(200)
  .rotate({angle:90})
  .id('saveView')

Button('截图')
  .onClick(() => {
    componentSnapshot.get("saveView", async (error: Error, pixmap: image.PixelMap) => {
      if (error) {
        console.error("error: " + JSON.stringify(error))
        return;
      }
      this.pixmap = pixmap;
    })
  })

Image(this.pixmap)
  .width('100%')

最后显示的还是图片原来的样子

Answer 1

图形那边的规格是组件截图不支持旋转属性，因为旋转可能会存在超过父组件的行为。如果要截带旋转属性的图，需要给image包一个父组件，截屏时截父组件。

参考demo如下：

import componentSnapshot from '@ohos.arkui.componentSnapshot'
import image from '@ohos.multimedia.image'

@Entry
@Component
struct SnapshotExample {
  @State pixmap: image.PixelMap | undefined = undefined
  build() {
    Column() {
      Row() {
        Image(this.pixmap)
          .width(200).height(200)
          .border({ color: Color.Black, width: 2 })
          .margin(5)
        Row(){
          Image($r('app.media.dog'))
            .autoResize(true)
            .width(200)
            .height(200)
            .margin(5)
              // .id("root")
              // 旋转90度
            .rotate({ angle: 90 })
        }
        .id("root")
      }

      Button("click to generate UI snapshot")
        .onClick(() => {
          componentSnapshot.get("root", (error: Error, pixmap: image.PixelMap) => {
            if (error) {
              console.log("error: " + JSON.stringify(error))
              return;
            }
            this.pixmap = pixmap
          })
        }).margin(10)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}