uni-app怎么实现视频封面截图 uni-app使用canvas截取帧画面【实战】-uni-app-PHP中文网

uni-app中video组件无法直接调用captureFrame，需用canvas+drawImage模拟截帧：先监听canplay获取video真实宽高，设置canvas原生尺寸，延迟绘制并确保draw完成后再toTempFilePath。

uni-app怎么实现视频封面截图 uni-app使用canvas截取帧画面【实战】

uni-app 中 video 组件无法直接调用 `captureFrame` 怎么办

uni-app 的组件在 iOS 和部分 Android 真机上不支持原生 captureFrame 方法（H5 环境下也无此 API），这是最常卡住开发者的前提。不能靠 video 对象直接截图，必须换路径：用 + drawImage 模拟帧捕获。

核心逻辑是：让 video 播放到目标时间点 → 将 video 元素作为图像源绘制到 canvas → 用 canvas.toTempFilePath 导出图片。

必须确保 video 已加载完成（监听 canplay 或 loadeddata 事件），否则 canvas 绘制为空白
Android 真机需注意：部分厂商 WebView（如华为 X86）对 drawImage(video, ...) 支持不稳定，建议加 setTimeout 延迟 100ms 再绘制
H5 端受限于跨域策略：若 video src 是非同源地址（如 OSS 直链），drawImage 会触发 canvas 污染，无法导出 —— 此时只能后端截帧或改用服务端生成封面

canvas 绘制视频帧时宽高失真、画面被拉伸怎么修

常见现象是截图出来的人物变胖、文字变形，本质是 canvas 绘制时没对齐 video 的原始宽高比。video 元素的 width/height 属性或 CSS 样式只是显示尺寸，而 video.videoWidth / video.videoHeight 才是真实像素尺寸。

正确做法是：先读取 video.videoWidth 和 video.videoHeight，再设置 canvas 的 width 和 height 属性（注意不是 style 宽高），最后按比例缩放绘制区域。

const video = uni.createVideoContext('myVideo', this)
video.play()
// 等待 canplay 后获取真实尺寸
video.onCanPlay(() => {
  const query = uni.createSelectorQuery().in(this)
  query.select('#myVideo').fields({ node: true, size: true }, res => {
    const videoNode = res.node
    const videoWidth = videoNode.videoWidth
    const videoHeight = videoNode.videoHeight
    const canvas = uni.createCanvasContext('myCanvas', this)
    // 关键：设置 canvas 原生宽高，而非 style
    const dpr = uni.getSystemInfoSync().pixelRatio
    canvas.canvas.width = videoWidth * dpr
    canvas.canvas.height = videoHeight * dpr
    // 绘制时保持原始比例（不拉伸）
    canvas.drawImage(
      videoNode,
      0, 0, videoWidth, videoHeight,
      0, 0, videoWidth * dpr, videoHeight * dpr
    )
  })
})

`canvas.toTempFilePath` 失败或返回黑图的典型原因

失败时控制台通常无报错，但生成文件为空或纯黑，多因时机或上下文问题。

Markdown Canvas

将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

下载

未等待 drawImage 完成就调用 toTempFilePath：必须用 canvas.draw(true, callback) 的回调确保绘制结束
canvas 上下文被重复创建或丢失：每次截图前应重新获取 uni.createCanvasContext，避免复用旧 context
真机调试开启「调试模式」导致 canvas 渲染异常：iOS 微信开发者工具和部分安卓调试器会禁用硬件加速，建议关闭调试器的「Enable Canvas Debug」选项
截图时间点 video 处于暂停/缓冲状态：需显式调用 video.seek 并监听 seeked 事件后再绘制