uni-app屏幕截图功能 uni-app如何实现截屏并保存-uni-app-PHP中文网

uni.getscreencapture 仅在微信小程序（基础库2.25.0+）和支付宝小程序中真正可用，h5、app、qq小程序、快应用均不支持；其他方案如html2canvas存在白屏、错位、不兼容cover组件等硬伤。

uni-app 截屏 api 在哪些平台真正可用

uni-app 官方的 uni.canvastotempfilepath 和 uni.createselectorquery 都不能直接截整个屏幕；真正能截屏的只有 uni.getscreencapture，但它只在微信小程序（基础库 2.25.0+）和支付宝小程序中可用，h5、app（ios/android）、qq 小程序、快应用全都不支持。

常见错误现象：uni.getScreenCapture is not a function 或调用后静默失败，基本就是当前环境不支持。

微信小程序：需在 manifest.json 中配置 "mp-weixin" → "permission" → "scope.screenCapture": true，且用户首次调用会弹授权框
App 端必须走原生插件或自定义基座：比如用 uni-app 的 nativePlugins 集成 iOS 的 UIGraphicsImageRenderer 或 Android 的 MediaProjection，纯 JS 无解
H5 完全不可行——浏览器没权限访问屏幕像素，html2canvas 只能“模拟”截图，不包含 video、iframe、canvas 内容，也不反映真实滚动位置

微信小程序里调用 `uni.getScreenCapture` 的正确姿势

这不是个普通 API：它不返回图片路径，而是返回一个可播放的 screenCaptureContext 对象，再通过 .start() 和 .stop() 控制录制，最终保存为本地文件。想“点一下截一张图”，得绕道用 canvas + dom-to-image 或 web-view 注入方式，但那不是真截屏。

实操建议：

先检查环境：if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') { /* 不走这条路 */ }
调用前确保已申请权限：uni.authorize({ scope: 'scope.screenCapture' })，否则 getScreenCapture 直接报错
stop() 后拿到的 tempFilePath 是临时路径，需立刻用 uni.saveFile 持久化，否则下次启动就失效
别在 onLoad 里直接调，容易因页面未渲染完成导致黑屏——建议加 setTimeout 延迟 100ms 或监听 onReady

App 端替代方案：用原生插件封装截图能力

uni-app 的 App 截图本质是调用原生 SDK，官方不提供，必须自己写或找成熟插件。比如 DCloud 插件市场里的 screen-capture（iOS）或 android-screenshot（Android），它们暴露统一的 JS 接口，但底层逻辑完全不同。

关键差异点：

iOS 插件通常基于 UIGraphicsImageRenderer，能截当前 window，但无法截 StatusBar 或其他 App；若用了 uni.navigateTo 打开的 web-view，里面内容可能空白
Android 插件依赖 MediaProjection，需要用户手动授权“屏幕录制”，第一次调用会跳系统弹窗；如果 App 被后台杀死，MediaProjection 实例就失效，无法续截
参数上，iOS 插件常支持 quality（0.1–1.0）、type（png/jpg），Android 插件则多一个 isFull 开关控制是否包含状态栏
性能影响明显：Android 全屏截图耗时约 300–800ms，期间 UI 会卡顿；iOS 相对快，但大分辨率下生成 PNG 文件体积可能超 5MB

为什么不用 `html2canvas`？它在 uni-app 里有哪些硬伤

很多开发者想用 html2canvas “曲线救国”，但它在 uni-app 多端运行时问题密集，不是简单引入就能用。

典型翻车场景：

在 App 端（尤其是 iOS），canvas 渲染层与 webview 渲染层不同步，经常截出白屏或错位；transform、filter、mask 属性全被忽略
微信小程序里，html2canvas 无法访问 cover-view 和 cover-image，而 uni-app 的按钮、地图、视频组件大量依赖这些，结果就是关键 UI 元素消失
H5 下看似能跑，但遇到 position: fixed 的导航栏，截图会把它按文档流位置画，而不是固定在顶部——滚动后截图完全错乱
它不处理跨域图片，哪怕只是本地 static 目录下的 .png，如果没配好 CORS 或没走 base64 内联，就会报 Failed to execute 'toDataURL' on 'HTMLCanvasElement'