TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
641
2.5m

x-screenshot-s ​

开发文档 ​

  1. 可以对窗口进行静默截图
  2. 可以对某一个view节点进行截图

应用场景 ​

  1. 对产品端,给用户反馈保存时,可以对当前反馈的页面进行截图反馈,比如界面异常上传等
  2. 对局部节点截图保存可以进行对局部的分享保存,比如页面的排版海报
  3. 对整个页面分享保存

兼容性 ​

HarmonyIOSAndroidWEB小程序
支持支持支持xx

注意事项 ​

使用前一定要打基座才可用，一定要在页面上先引用，再去打基座。 如果你mac开发。ios可以不用打基座，能直接使用（但前提是你要配置好原生开发环境，否则一样要打包） 如果你是开始安卓，不管是mac,win电脑都要打包基座才能使用。

API说明 ​

getRootShotImage ​

ts
function getRootShotImage(callback: (str: string) => void): void

参数说明：

  • callback：截图完成后的回调函数
    • str：截图保存后的文件路径，如果截图失败则返回空字符串

getElementShotImage ​

ts
function getElementShotImage(ele: UniElement|null, callback: (str: string) => void): void

鸿蒙不支持此方法,原因在于官方的 sdk 无法获取鸿蒙节点的原生 View 实例信息

参数说明：

  • ele：要截图的目标元素，UniElement类型
  • callback：截图完成后的回调函数
    • str：截图保存后的文件路径，如果截图失败则返回空字符串

示例代码 ​

vue
<template>
  <x-sheet id="screentIds">
    <x-button class="mb-16" :block="true" @click="getScreenimg">保存屏幕图片</x-button>
    <x-button :block="true" @click="getSEleimg">保存节点截图</x-button>
  </x-sheet>
</template>

<script setup lang="ts">
import {getRootShotImage, getElementShotImage} from "@/uni_modules/x-screenshot-s"

const getScreenimg = () => {
  getRootShotImage((str: string) => {
    if(str == null) return;
    console.log(str)
    uni.previewImage({
      current: str,
      urls: [str] as string[]
    })
  })
}

const getSEleimg = () => {
  let ele = uni.getElementById("screentIds") as UniElement|null
  getElementShotImage(ele, (str: string) => {
    if(str == null) return;
    console.log(str)
    uni.previewImage({
      current: str,
      urls: [str] as string[]
    })
  })
}
</script>

常见问题 ​

  1. 截图黑屏或无内容

    • 确保已正确打包基座
    • 检查目标View是否已完成渲染
    • Android端确保View的宽高不为0

  2. 截图文件路径无效

    • 检查应用是否有存储权限
    • 确保缓存目录可写入

  3. 性能注意事项

    • 大尺寸View截图可能占用较多内存
    • 建议在截图后及时释放不需要的图片资源

更新日志 ​

1.0.1（2025-07-27） ​

  • 兼容鸿蒙

1.0.0（2024-12-18） ​

  • 对屏幕截图保存(不需要权限),对指定截图进行保存,安卓,ios支持,web不支持.
最近更新