HarmonyOS 鸿蒙Next组件截图功能图片最大高度只能是手机屏幕高度么

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next组件截图功能图片最大高度只能是手机屏幕高度么

参考地址:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-componentsnapshot-V5

测试发现内容高度超出屏幕高度后,图片展示不全
import { componentSnapshot } from ‘@kit.ArkUI’;
import { image } from ‘@kit.ImageKit’;

@Entry
@Component
struct OffscreenSnapshotExample {
@State pixmap: image.PixelMap | undefined = undefined

@Builder
RandomBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text(‘开始1111:指定是否允许在截图之前,校验图片解码状态。如果为true,则会在截图之前检查所有Image组件是否已经解码完成,如果没有完成检查,则会放弃截图并返回异常。\n’ +
‘\n’ +
‘默认值:false指定是否允许在截图之前,校验图片解码状态。如果为true,则会在截图之前检查所有Image组件是否已经解码完成,如果没有完成检查,则会放弃截图并返回异常。\n’ +
‘\n’ +
‘默认值:false指定是否允许在截图之前,校验图片解码状态。如果为true,则会在截图之前检查所有Image组件是否已经解码完成,如果没有完成检查,则会放弃截图并返回异常。\n’ +
‘\n’ +
‘默认值:false 结束22222’)
.fontSize(30)
.width(“100%”)
.backgroundColor(Color.Red)
.textAlign(TextAlign.Center)
}
.width(100)
.backgroundColor(Color.Green)
.id(“builder”)
}

build() {
Column() {
Button(“click to generate offscreen UI snapshot”)
.onClick(() => {
// 建议使用this.getUIContext().getComponentSnapshot().createFromBuilder()
componentSnapshot.createFromBuilder(() => {
this.RandomBuilder()
},
(error: Error, pixmap: image.PixelMap) => {
if (error) {
console.log("error: " + JSON.stringify(error))
return;
}
this.pixmap = pixmap
// save pixmap to file
// …
// get component size and location
let info = this.getUIContext().getComponentUtils().getRectangleById(“builder”)
console.log(“ssssssssssssssss”+info.size.width + ’ ’ + info.size.height + ’ ’ + info.localOffset.x + ’ ’ +
info.localOffset.y + ’ ’ + info.windowOffset.x + ’ ’ + info.windowOffset.y)
}, 320, true, { scale: 1, waitUntilRenderFinished: true })
})
Image(this.pixmap)
.height(“100%”)
.width(300)
.objectFit(ImageFit.Contain)
.border({ color: Color.Black, width: 2 })
}.width(‘100%’).margin({ left: 10, top: 5, bottom: 5 }).height(300)
}

2 回复

createFromBuilder 和get方法必须当前组件实例存在时,才能进行截图,createFromBuilder中的builder参数也是指需要截取自定义组件构建函数实例,建议在使用componentSnapshot.get绑定id截取当前整个组件时通过visibility控制组件显隐结合Stack来进行想要的布局,参考如下:


import { componentSnapshot } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct OffscreenSnapshotExample {
  [@State](/user/State) pixmap: image.PixelMap | undefined = undefined

@Builder RandomBuilder() { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Scroll(){ Text(‘开始1111:指定是否允许在截图之前,校验图片解码状态。如果为true,则会在截图之前检查所有Image组件是否已经解码完成,如果没有完成检查,则会放弃截图并返回异常。\n’ + ‘\n’ + ‘默认值:false指定是否允许在截图之前,校验图片解码状态。如果为true,则会在截图之前检查所有Image组件是否已经解码完成,如果没有完成检查,则会放弃截图并返回异常。\n’ + ‘\n’ + ‘默认值:false指定是否允许在截图之前,校验图片解码状态。如果为true,则会在截图之前检查所有Image组件是否已经解码完成,如果没有完成检查,则会放弃截图并返回异常。\n’ + ‘\n’ + ‘默认值:false 结束22222’) .fontSize(30) .width(“100%”) .backgroundColor(Color.Red) .textAlign(TextAlign.Center) } } .visibility(Visibility.Hidden) .width(300) .backgroundColor(Color.Green) .id(“hello”) }

build() { Scroll() { Column() { Button(“click to generate offscreen UI snapshot”) .onClick(()=> { componentSnapshot.get(“hello”, async (error: Error, pixmap: image.PixelMap) => { this.pixmap = pixmap

        })
      })
    Stack({alignContent: Alignment.Top}) {
      Image(<span class="hljs-keyword">this</span>.pixmap)
        .height(<span class="hljs-number">400</span>)
        .width(<span class="hljs-number">300</span>)
        .objectFit(ImageFit.Contain)
        .border({ color: Color.Black, width: <span class="hljs-number">2</span> })
      <span class="hljs-keyword">this</span>.RandomBuilder()
    }
  }.width(<span class="hljs-string">'100%'</span>).margin({ left: <span class="hljs-number">10</span>, top: <span class="hljs-number">5</span>, bottom: <span class="hljs-number">5</span> })
}

} }

针对HarmonyOS 鸿蒙Next组件截图功能图片最大高度的问题,以下是专业解答:

HarmonyOS 鸿蒙Next组件截图功能图片的最大高度并非仅限于手机屏幕高度。实际上,鸿蒙系统支持长截屏功能,可以滚动截取超出屏幕高度的内容。然而,长截屏功能可能会受到一些限制,如系统设定的最大高度限制(一般限制高度在14000像素左右),以避免截取的图片占据过大内存空间。

此外,如果截取的屏幕中存在影响正确拼接的内容,如悬浮窗、动态刷新内容或非纯色背景,可能会导致长截屏失败或出现异常。

因此,在使用长截屏功能时,建议确保截取的内容符合系统要求,并检查相关权限设置是否正确。

HarmonyOS Next 纯血鸿蒙教程B站免费学习地址https://www.bilibili.com/video/BV1fw2ZYSEk2

回到顶部