HarmonyOS 鸿蒙Next组件截图功能图片最大高度只能是手机屏幕高度么
HarmonyOS 鸿蒙Next组件截图功能图片最大高度只能是手机屏幕高度么
测试发现内容高度超出屏幕高度后,图片展示不全
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)
}
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