Tooscut素材导入指南：视频、音频、图片零上传全本地处理

Tooscut 是一款运行在浏览器中的专业非线性视频剪辑工具（NLE），基于 Rust/WASM 与 WebGPU 实现 GPU 加速渲染。本文带你完整掌握 Tooscut 的素材导入流程：如何导入视频、音频、图片素材，以及如何利用 File System Access API 实现零上传、全本地的安全剪辑——所有文件始终留在你的电脑上，不经过任何服务器。

为什么 Tooscut 的素材导入是"零上传"的？

传统在线剪辑工具需要把素材上传到云端服务器再拉回预览，既慢又有隐私风险。Tooscut 的做法完全不同：

• File System Access API 直接读盘：浏览器获得你显式授权后，直接从本地磁盘读取文件，全程不产生上传流量。
• 本地 GPU 渲染：解码与合成由 Rust/WASM 编写的合成器（compositor）在本地 GPU 上完成。
• 素材句柄本地持久化：导入过的素材会以文件句柄形式存入浏览器的 IndexedDB，下次打开同一项目时自动恢复，无需重新导入。

核心实现可参考 use-asset-store.ts（素材导入与句柄持久化逻辑）和 asset-panel.tsx（素材面板组件）。

导入前准备：新建一个剪辑项目 🎬

素材需要挂靠在项目上。打开 Tooscut 后点击New project，设置名称、分辨率与帧率（之后可在 Project Settings 中修改）：

方式一：文件选择器一键导入素材

这是最快捷的方式，支持批量选择多个文件：

1. 点击顶部菜单栏File > Import Media；
2. 或直接按快捷键⌘I（macOS）/Ctrl+I（Windows/Linux）；
3. 在系统文件选择器中勾选一个或多个视频、音频、图片文件，确认即可。

菜单入口的源码位于 toolbar.tsx。导入后，文件会自动出现在左侧素材面板中。

方式二：拖拽导入，素材直接上时间轴 ✨

Tooscut 支持两种拖拽，效率更高：

从文件管理器拖入素材面板——把文件拖到窗口内，面板会出现 "Drop files to import" 提示，松开即完成导入：

从文件管理器直接拖到时间轴——跳过素材面板，一步生成轨道上的剪辑片段：

💡 拖拽时若浏览器支持，Tooscut 会同时获取文件的系统句柄，保证之后可以跨会话恢复该素材。

素材面板：视频、音频、图片统一管理

导入的素材集中在左侧Assets面板，提供 All / Video / Audio / Image 四个分类页签，每个页签还有独立的Import Video、Import Audio、Import Image按钮，方便按类型筛选导入。

每张素材卡片展示的信息：

实用细节：

• 自动去重：相同 名称 + 大小 + 类型 的文件不会重复导入；
• 悬停移除：鼠标悬停在卡片上，右上角出现 ✕ 按钮，可一键移除该素材；
• 不可识别的格式会被跳过并在控制台提示，不会阻塞其他文件导入。

支持的素材格式一览表 📋

官方文档 importing-assets.mdx 列出了完整格式表：

⚠️ 视频格式能否播放最终取决于浏览器解码能力——选择器允许选中的格式，不代表都能成功解码，以导入后素材卡片是否正常显示缩略图为准。

导入后的关键行为：自动联动与默认时长

带声音的视频会自动创建联动片段（Linked Pair）：导入后拖上时间轴时，视频剪辑与音频剪辑分别落在视频轨和音频轨上，并且：

• 移动、分割、修剪、删除——两边同步进行，音视频永不同步错位；
• 右键联动片段选择Unlink即可解绑，各自独立编辑。

图片素材默认 10 秒时长：拖上时间轴后图片片段默认为 10 秒，可自由拉伸或缩短（源码见 use-asset-store.ts 中的默认时长逻辑）。

LUT 文件导入后可在调色节点图中引用，用于电影感调色。

常见问题 FAQ 🙋

问：我的文件会被上传到服务器吗？不会。Tooscut 通过 File System Access API 在你的浏览器里直接读取本地文件，整个渲染管线（WebGPU + WASM 合成器）也运行在本地。

问：关闭浏览器后，素材还在吗？在。素材句柄保存在 IndexedDB 中，重新打开项目会自动尝试恢复；若浏览器弹出权限询问，点击允许即可再次读取原文件（原文件不能被移动或删除）。

问：导入后素材卡片没有缩略图或导入失败？通常是该编码格式不被当前浏览器支持（如部分 HEVC 编码）。建议转封装为 MP4（H.264/H.265）或 WebM 后重新导入。

问：可以一次导入多个不同类型的文件吗？可以。文件选择器与拖拽均支持混合批量导入，面板会自动分类。

延伸阅读 🔍

• 官方素材导入文档：importing-assets.mdx
• 多轨剪辑与联动片段：multi-track-editing.mdx
• 键盘快捷键（含⌘I导入、⌘E导出）：keyboard-shortcuts.mdx
• 素材导入与文件句柄持久化源码：use-asset-store.ts
• 渲染引擎（本地合成）：packages/render-engine/

掌握以上导入方式后，你的素材库已经就位——下一步可以学习时间轴剪辑，开始第一段作品的创作。