实时音视频
实时音视频
文档指南
请输入
实时音视频
快速入门
场景方案
开发指南
Token 鉴权
音频管理
视频管理
屏幕共享
SDK 升级指南
客户端 API 参考
服务端 API 参考
房间管理
转推直播
输入在线媒体流
WTN 流（原公共流）
实时数据监控
历史数据查询
业务标识管理
实时消息通信
历史版本（文档停止维护）
2023-08-01
2023-06-01
转推直播
2022-06-01
2020-12-01
转推直播
输入在线媒体流
获取数据指标
常见问题
集成相关
质量相关
AI 音视频互动方案
开发指南
配置 ASR/LLM/TTS 服务
API 参考
硬件对话智能体
用户指南
服务端 API
智能体
实时信令
互动白板
客户端 API 参考
服务端 API 参考
- 文档首页
实时音视频实时音视频开发指南视频管理Web 端视频截图处理
复制全文
下载 pdfWeb 端视频截图处理
文档反馈
问问助手在你调用 takeLocalSnapshot / takeRemoteSnapshot截取本地/远端视频画面后，你通常需要对返回的 ImageData 进行处理，将其转换成 Blob、JPEG 等格式供后续使用，你可以参考以下最佳实践来实现。
步骤 1：获取 ImageData 并转化为 Canvas
// 提取ImageData对象
var imageData = await engine.takeLocalSnapshot(StreamIndex.STREAM_INDEX_MAIN);
// 创建Canvas元素并获取上下文
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = imageData.width;
canvas.height = imageData.height;
context.putImageData(imageData, 0, 0);
步骤 2: 将 Canvas 转换为其他类型
转换为 Blob
// canvas 转 Blob
canvas.toBlob((blob) => {
// 获取 Blob 并进行后续操作
const file = new File([blob], "view.png", { type: "image/png" });
const imgUrl = URL.createObjectURL(file);
const imgElement = document.createElement('img');
imgElement.src = imgUrl;
document.body.appendChild(imgElement);
});
转换为 JPEG
// canvas 转 JPEG
const url = canvas.toDataURL('image/jpeg');
const a = document.createElement('a');
a.href = url;
a.download = '截图-' + Date.now();
a.click();
转换为 PNG
// canvas 转 PNG
const url = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = url;
a.download = '截图-' + Date.now();
a.click();
最近更新时间：2026.07.27 14:27:06
这个页面对您有帮助吗？
有用
有用
无用
无用